Geek Answers Handbook

Monaco Editor Height

I want to make a very simple Monaco: JSBin editor :

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <style> .me { height: 100vh; } </style> </head> <body> <div class="me" id="container"></div> <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }}) require(["vs/editor/editor.main"], function () { var editor = monaco.editor.create(document.getElementById('container'), { value: 'function x() {\n\tconsole.log("Hello world!");\n}', language: 'javascript', minimap: { enabled: false }, scrollBeyondLastLine: false }); }); </script> </body> </html>

When I see this in Chrome and scroll up and down, there is a scroller for the whole window. This seems to be because the height of the editor is greater than the height of the window. I just don't want to see any scrollers. Does anyone know how to achieve this?

Edit 1: screenshot in Safari 10.1.2 with height: calc(100% - 24px)

enter image description here

Decision:

With the answers, here is a solution that works for me:

1), we need to check this in an independent html file, and not in JSBin

2) the key should use overflow: hidden

3), as a result, the following code does not create a scroll bar while scrolling up and down, there are no lines at the bottom of the line:

 <html> <style> body { overflow: hidden; } .myME { height: 100% } </style> <body> <div class="myME" id="container"></div> <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }}) require(["vs/editor/editor.main"], function () { var editor = monaco.editor.create(document.getElementById('container'), { value: 'function x() {\n\tconsole.log("Hello world!");\n}', language: 'javascript', minimap: { enabled: false }, automaticLayout: true, scrollBeyondLastLine: false }); }); </script> </body> </html>
+6
javascript css height monaco-editor
source share
6 answers

I believe this works by simply setting the edge of the body and padding to 0, and the .me overflow is hidden.

 .me { height: 100vh; overflow: hidden; } body{ margin:0; padding:0; }

This will not cause your lines to become invisible, since monaco will handle scrolling for you.

In fact, you get your native scrollbar just because it has something to do with how monaco gets implemented scrolls. Setting the editor container overflow to hidden will just work fine.

PS Keep in mind that the size of the editor will not change when the window is resized, so you need to determine the resizing and call editor.layout() manually.

+1
source share

EDITED

Use this:

 .me { position:absolute; left:0; top:0; width:100%; height:100%; max-height:100% !important; margin:0; padding:0; overflow:hidden; }

It works on my computer.

+3
source share

You can set the height of the editor according to the screen and use overflow: hidden; in the window, as well as overflow: auto; in the editor

+1
source share

A space of 30 pixels has been added to the class="label" field. it is outside the iframe you are using, but it takes up space in the document. enter image description here

So, to solve your problem, you need to configure 30px in the editor, reducing it from div .me .

 .me { height:calc(100vh - 30px); }

Hope this solves your problem.

0
source share

Update your CSS below

 .me { height:50%; position:relative;display:block } .me-parent{ position:absolute; top:0; left:0px; right:0px; height:100%;display:block; }

and update the html structure below

 <div class="me-parent"><div class="me" id="container"></div></div>

Check the output here https://jsbin.com/timoyot/edit?html,output

this can help

0
source share

Use this:

 .me { height: 100vh; font-size: 16px; } body { margin: 0; padding: 0; font-size: 0; }

Spaces around the container cause an error.

0
source share

More articles:


All Articles