CODEWITHSUNDEEP
htmlcssace-editor
user441521
user441521

Reputation: 6998

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>

Upvotes: 27

Views: 28332

Answers (5)

Mario V&#225;zquez
Mario V&#225;zquez

Reputation: 777

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>

Upvotes: 10

Gal Margalit
Gal Margalit

Reputation: 5844

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.

Upvotes: 3

pot
pot

Reputation: 261

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>

Upvotes: 8

kjdion84
kjdion84

Reputation: 10054

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

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

Upvotes: 3

scain
scain

Reputation: 348

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.

Upvotes: 17

Related Questions