While embedding the Ace Editor in a Chrome popup window, I encountered a challenge. My goal was to keep the first row of text always visible at the top while allowing the rest of the Editor to fill the screen. However, there is an issue with a vertical scrollbar appearing when scrolling down to see the bottom of the Editor where the horizontal scrollbar is located. This makes the highlighting aqua text no longer visible. Is there a CSS solution that can address this problem and allow for both vertical and horizontal scrolling within the Editor without affecting the parent window?
I attempted a slightly different approach in a JSFiddle: http://jsfiddle.net/rvq62hzp/3/
Code
HTML
<div class="source_table">
<div class="source_table_row" style="background-color: aqua;">
<div>
<p>Text</p>
<br/>
<p>Text</p>
</div>
</div>
<div class="source_table_row" style="background-color: blueviolet;">
<pre id="editor"></pre>
</div>
</div>
CSS
body {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
font-weight: 400;
min-width: 250px;
padding: 0;
margin: 0;
}
p {
display: unset;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.source_table {
display: table;
}
.source_table_row {
display: table-row;
}
.ace_editor {
position: absolute !important;
/*border: 1px solid lightgray;*/
margin: auto;
height: 100%;
width: 100%;
}
JavaScript
editor = ace.edit("editor");
editor.setTheme("ace/theme/textmate");
editor.session.setMode("ace/mode/html");
editor.setOptions({
hScrollBarAlwaysVisible: true,
vScrollBarAlwaysVisible: true
});
editor.session.setValue(code);
Ace Editor
https://i.sstatic.net/qBJzX.png https://i.sstatic.net/OFOAT.png