Menu
I want to embed a Monaco Editor in a page under some fixed texts, I want the height of the Monaco Editor to fill exactly the rest of the page. People gave me an answer here: JSBin:
<html>
<style>
html, body, .rb {
margin: 0;
height: 100%;
}
.rb {
display: table;
width: 100%;
border-collapse: collapse;
}
.top, .myME {
display: table-row;
}
.buffer {
display: table-cell;
}
.top .buffer {
background: lightblue;
height:1%;
}
.myME .buffer {
background: tomato;
}
#container {
position:relative;
}
#container > * {
overflow:auto;
max-width:100%;
max-height:100%;
}
</style>
<body>
<div class="rb">
<div class="top">
<div class="buffer">
1<br/>2<br/>3<br/>4<br/>
</div>
</div>
<div class="myME">
<div class="buffer" id="container">
</div>
</div>
</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>
It works perfectly in Chrome, but it does not display the editor in Safari because of max-height:100% of #container > *. If we set it to max-height:100vh or height: 100vh, it works more or less in Safari (with a little bit flashing when the focus reaches the bottom of the editor), whereas it shows a scroller while scrolling up and down in Chrome.
Does anyone have a solution that works both in Chrome and Safari? Otherwise, is it possible to set specific rule for Chrome or Safari only?
563
You can use vh and flex-grow together:
.rb {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.rb #container {
flex-grow: 1;
}
Edit: Aha - Monico Editor has a fixedOverflowWidgets: true that can be set. Here is the final functional thing: https://jsfiddle.net/pa8y2fzy/3/
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() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript',
fixedOverflowWidgets: true
});
});
Edit: As I mentioned in the comments, I don't have access to Safari, but here is a page with Safari CSS hacks: is there a css hack for safari only NOT chrome?
56
Finally, in Chrome and Safari, 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, the footer is always at the bottom regardless of resizing. Additionally, it is important to test it in an independent html file rather than in JSBin.
<html>
<style>
.rb {
height: 100%;
display: flex;
flex-direction: column;
}
.myME {
flex:1;
overflow: hidden;
}
.footer {
flex-shrink: 0;
background:#f8f8f8;
border-top: 1px solid #e7e7e7
}
</style>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME" id="container"></div>
<div class="footer">haha</div>
</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}\nfunction x() {\n\tconsole.log("Hello world!");\n}\nfunction x() {\n\tconsole.log("Hello world!");\n}',
language: 'javascript',
minimap: { enabled: false },
automaticLayout: true,
scrollBeyondLastLine: false
});
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With