How to get the ace editor to adjust to its parent div
I have the ace div inside another div and I would like the ace editor to adjust it's width and height to the parent div. I call editor.resize() but nothing happens.
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100px;
}
</style>
</head>
<body style="height: 100%">
<div style="background-color: red; height: 100%; width: 100%;">
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
</div>
<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
editor.resize();
</script>
</body>
</html>
Answer
You can achieve what you want in two manners. I have created a jsfiddle showing the css and javascript used to resize the ace-editor to its container.
The css used is to make it so the editor takes up the width and height of the container, so that editor.resize() can properly calculate the size the editor should be.
I recommend the following to get the editor.resize() to work.
<style type="text/css" media="screen">
#editor {
width: 100%;
height: 100%;
}
</style>
However if you want to maintain using the current css you have for #editor the following will work.
<style type="text/css" media="screen">
#editor {
position: absolute; /* Added */
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
and add position: relative; to the container, so that the absolutely positioned editor is correctly positioned inside its container. As to how this works I refer you to Absolute positioning inside relative positioning.