CODEWITHSUNDEEP
javascriptace-editorcode-editor
Jon Wood
Jon Wood

Reputation: 9

Two code editors refuse to sit side by side

I'm trying to use two code editor controls side by side to show input and output to a program.

I've tried different methods and two different controls (CodeMirror and Ace) but neither of them seem to want to work side by side.

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr
}
#editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#editor2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" href="MainStyles.css">
    <title>Product App</title>
</head>
<body>
    <div class='grid-parent'>
        <div class='child'>        
            <div id="editor">
                function foo(items) {
                var x = "All this is syntax highlighted";
                return x;
                }
            </div>
         </div>
        <div class='child'>
            <div id="editor2">
                function foo(items) {
                var x = "All this is syntax highlighted";
                return x;
                }
            </div>
        </div>
    </div>

    <script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>

        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/javascript");

        var editor2 = ace.edit("editor2");
        editor2.setTheme("ace/theme/monokai");
        editor2.session.setMode("ace/mode/javascript");
    </script>
</body>
</html>

Running this code I only seem to get a single editor control which fills the whole page. I've tried the same thing with codeMirror but to no avail.

I'll need various items around the controls for menus etc. but right now all I need is a split editor, which don't reference the same file/text.

Upvotes: 0

Views: 167

Answers (2)

a user
a user

Reputation: 24159

This is not related to the editor itself, as the height is wrong for the element itself, you can either add .child{position:relative}, or remove the .child and remove the css for #editor.

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  margin: 0;
}

body {
  height: 100%;
  margin: 0;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" href="MainStyles.css">
    <title>Product App</title>
</head>
<body>
    <div class='grid-parent'>
        <div class='child' id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
        <div class='child'  id="editor2">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
    </div>

    <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>

        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/javascript");

        var editor2 = ace.edit("editor2");
        editor2.setTheme("ace/theme/monokai");
        editor2.session.setMode("ace/mode/javascript");
    </script>
</body>
</html>

Upvotes: 0

imjared
imjared

Reputation: 20584

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" href="MainStyles.css">
    <title>Product App</title>
</head>
<body>
    <div class='grid-parent'>
        <div class='child'>        
            <div id="editor">
                function foo(items) {
                var x = "All this is syntax highlighted";
                return x;
                }
            </div>
         </div>
        <div class='child'>
            <div id="editor2">
                function foo(items) {
                var x = "All this is syntax highlighted";
                return x;
                }
            </div>
        </div>
    </div>
</body>
</html>

You can remove the position absolute stuff. Right now, you're layering these two editors on top of each other.

Upvotes: 1

Related Questions