Javascript :: Ace Editor Positioning with Bootstrap3

Ace editor is a fantastic option for live source code editor on the web. One problem you come across when using Ace Editor is with the default absolute positioning. Also it doesn’t fit inside a container div by default. Here is how I overcame these issues.

The example from ace website uses absolute positioning by default, as show below. But luckily, ace can work perfectly with relative positioning

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<!DOCTYPE html>
<html lang="en">
<head>
    <title>ACE in Action</title>
    <style type="text/css" media="screen">
        #editor {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="editor">function foo(items) {
        var x = "All this is syntax highlighted";
        return x;
    }
    </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");
    </script>
    </body>
</html>

In order to put ace-editor inside a container div, we can give relative positioning to the editor and remove the positioning attribs, like top, right, bottom and left.

1
2
3


#editor {
    position: relative;
}

We also need to give height, otherwise editor won’t show up.

1
2
3
4


#editor {
    position: relative;
    height: 300px;
}

That said, when using Twitter Bootstrap, you can absolutely forget about relative positioning of ace. But we still need to set height, as ace does not fill. In the following jsfiddle, I have used Bootstrap’s panel component for showing the editor.

Full Screen Result is available here. https://jsfiddle.net/deepumohanp/U5JtP/embedded/result/

Fiddle here: https://jsfiddle.net/deepumohanp/U5JtP/

References #

References
#