Attempting to have Monaco resize properly.

5 years ago · 39c149c006
parent 985866071b
commit 39c149c006
3 changed files with 47 additions and 3 deletions
--- a/example/example.css
+++ b/example/example.css
@ -2,18 +2,52 @@
  margin: 0;
 }

+h1 {
+  font-family: Helvetica, sans-serif;
+  font-size: 24px;
+  border-radius: 4px;
+  border: 1px solid darkgray;
+  background: #e1e1e1;
+  padding: 10px;
+}
+
+h2 {
+  font-family: Helvetica, sans-serif;
+  font-size: 18px;
+  border-bottom: 1px solid darkgray;
+  margin-bottom: 5px;
+}
+
+.description {
+  font-family: Helvetica, sans-serif;
+  border-radius: 4px;
+  border: 1px solid darkgray;
+  background: #e1e1e1;
+  padding: 4px 10px;
+  margin-bottom: 5px;
+}
+
 .editors {
+  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
+  max-width: 100%;
 }

 .editor-column {
  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-column:first-child {
+  margin-right: 20px;
 }

 .editor {
  height: 500px;
  border: 1px solid grey;
-  margin-right: 20px;
+  flex: 1;
+
 }
--- a/example/example.js
+++ b/example/example.js
@ -84,4 +84,10 @@ require(['vs/editor/editor.main', 'MonacoCollabExt'], function(m, MonacoCollabEx
      target.updateOptions({readOnly: true});
    }
  });
+
+
+  window.addEventListener('resize', () => {
+    source.layout();
+    target.layout();
+  });
 });
--- a/example/index.html
+++ b/example/index.html
@ -9,12 +9,16 @@
  <link rel="stylesheet" href="./example.css">
 </head>
 <body>
-
+<h1>Monaco Editor Collaborative Extensions Demo</h1>
 <div class="editors">
  <div class="editor-column">
-    <div  class="editor" id="source-editor"></div>
+    <h2>Source Editor</h2>
+    <div class="description">Type and make selections here.</div>
+    <div class="editor" id="source-editor"></div>
  </div>
  <div class="editor-column">
+    <h2>Target Editor</h2>
+    <div class="description">See remote cursors and selections here.</div>
    <div class="editor" id="target-editor"></div>
  </div>
 </div>