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>

scain

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.

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>

Using jquery-ace I've managed this simply by using:

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

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">
        &#x3C;div&#x3E;
        &#x9;&#x9;this is a div
        &#x9;&#x3C;/div&#x3E;
    </pre>
</div>

<script>
    $(document).ready(function() {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/TextMate");
        editor.session.setMode("ace/mode/html");
    });
</script>

Reset its settings back to the browser default, which by design fit the parent container.

#editor {
    width: inherit !important;
}

I'm using the react-ace wrapper for reactjs. It could be beneficial to any ace wrapper which have some defaults overwritten.

来源：https://stackoverflow.com/questions/28785588/how-to-get-the-ace-editor-to-adjust-to-its-parent-div

标签

html

css

ace-editor