Menu
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>
543
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.
73
You can achieve by the following way. Run the code snippet for example.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow_night");
editor.session.setMode("ace/mode/xml");
editor.session.setUseSoftTabs(true);#parent {
width:50%;
height: 600px;
display:inline-block;
position:relative;
}
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
<html>
<body>
<div id="parent">
<div id="editor"></div>
</div>
</body>
</html>I got it working with simple CSS:
#container{
height:80vh;
}
#editor {
width: 100%;
height: 100%;
position: relative;
}
The key property is position:relative, overriding the default position:absolute of the ace editor, which produces the parent container being unable to adjust its content.
<div id="container">
<pre id="editor">
<div>
		this is a div
	</div>
</pre>
</div>
<script>
$(document).ready(function() {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/TextMate");
editor.session.setMode("ace/mode/html");
});
</script>
Using jquery-ace I've managed this simply by using:
$('#php_code').ace({
theme: 'chrome',
lang: 'php',
width: '100%',
height: '300px'
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
