CODEWITHSUNDEEP
javascriptcssheightmonaco-editor
SoftTimur
SoftTimur

Reputation: 5510

Height of the Monaco Editor

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

<!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 it in Chrome and scroll up and down, there is a scroller for the whole window. It seems that it is because the height of the editor is larger than the height of the window. I just don't want to see any scrollers. Does anyone know how to achieve this?

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

enter image description here

Solution:

With the help of the answers, here is the solution working for me:

1) we need to test this in an independent html file rather than in a JSBin

2) the key is to use overflow: hidden

3) as a result, the following code does not create any scroll bar while scrolling up and down, there are no lines hidden in the bottom when the code is long:

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

Upvotes: 11

Views: 22763

Answers (6)

Sajjad Sky
Sajjad Sky

Reputation: 81

EDITED

Use this one : 

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

Upvotes: 5

MMhunter
MMhunter

Reputation: 1441

I believe it works just by setting body's margin and padding to 0, and the .me's overflow to hidden.

.me {
    height: 100vh;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}

This won't cause your lines in the bottom invisible, since monaco will handle the scrolling for you.

In fact you are getting the native scrollbar just because that has something to do with how monaco get the scrolling stuffs implemented. Setting the editor container's overflow to hidden will just work fine.

P.S Keep in mind that the editor's size won't change when you resize the window, so you have to detect the resizing and call editor.layout() manually.

Upvotes: 9

Saravanan I
Saravanan I

Reputation: 1229

There is a 30px space added by the class="label" div. it is outside the iframe which you are using but it takes the space in the document. enter image description here

So to solve your issue you have to adjust 30px in the editor by reducing it from the .me div.

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

Hope this will solve your issue.

Upvotes: 0

username.ak
username.ak

Reputation: 182

Use this:

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

Whitespaces around the container cause that bug.

Upvotes: 0

AshenCrow
AshenCrow

Reputation: 165

You can set the height of the editor to fit the screen and use overflow: hidden; on the window, along with overflow: auto; on the editor

Upvotes: 1

Sanjay
Sanjay

Reputation: 390

Update your CSS as below

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

and update your html structure as below

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

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

this may help

Upvotes: 1

Related Questions