0

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.

Improve this question
1
  • What happens instead? Any error messages given? Commented Aug 19, 2019 at 14:30

2 Answers 2

Reset to default
1 

.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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.