Geek Answers Handbook

How to get the ace editor to adjust its parent div

I have an ace div inside another div, and I would like the ace editor to adjust its 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>
+7
html ace-editor
source share
2 answers

You can achieve what you want in two ways. I created a jsfiddle showing css and javascript used to resize the ace editor in its container.

Css is used to make the editor take up the width and height of the container, so editor.resize() can correctly calculate the size that should be in the editor.

I recommend the following to make editor.resize() work.

 <style type="text/css" media="screen"> #editor { width: 100%; height: 100%; } </style>

However, if you want to support the use of current css 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; into the container so that the absolutely positioned editor is correctly located inside the container. Regarding this, I refer you to Absolute positioning within relative positioning.

+6
source share

Using jquery-ace I managed this simply:

  $('#php_code').ace({ theme: 'chrome', lang: 'php', width: '100%', height: '300px' })
+2
source share

More articles:


All Articles