Search code examples
javascripthtmlcssace-editor

Allow Scrolling In Second Table Row While Using First Row As Table Header (CSS)

I am embedding the Ace Editor in a Chrome popup window. I am trying to keep the text (first row) always visible and then have the Editor fill the rest of the screen. I have almost achieved this however, as you can see in the screenshots, there is a vertical scrollbar that is shown because you have to scroll down the main window to see the bottom of the Editor (where the horizontal scroll bar is). Thus, the highlighting aqua text is no longer visible. What CSS needs to be implemented to keep the first row always visible at the top, while being able to vertical and horizontal scroll in the editor without the need for scrolling in the parent window?

I tried doing something slightly different then what is shown here 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

enter image description here enter image description here

Solution

  • it's hard to answer your question because it is unclear what parts of example are essential to your design and what can be changed.

    If you can use display flex instead of table, then solution is very simple: set the height of source_table to fill the whole window, and set the parent of ace editor to have flex:1 and position: relative

    var editor = ace.edit("editor");
editor.session.setUseWorker(false);
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
    body {
  margin: 0
}

.source_table {
  display: flex;
  flex-direction: column;
  height: 100vh;
  bacground: red
}

.editor_wrapper {
  flex: 1;
  position: relative;
}

#editor {
  position: absolute !important;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 100%;
}
    <div class="source_table">
  <div style="background-color: aqua;">
    <div>
      <p>Text</p>
      <br/>
      <p>Text</p>
    </div>
  </div>
  <div class="editor_wrapper" style="background-color: blueviolet; border:solid">
    <pre id="editor"></pre>
  </div>
</div>
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

    note that this question is not really related to ace, and would equally apply to positioning any div.