Разрешить прокрутку во второй строке таблицы при использовании первой строки в качестве заголовка таблицы (CSS) - PullRequest
Новая
       27

Разрешить прокрутку во второй строке таблицы при использовании первой строки в качестве заголовка таблицы (CSS)

0 голосов
/ 07 марта 2020

Я встраиваю Ace Editor во всплывающее окно Chrome. Я стараюсь, чтобы текст (первая строка) всегда был виден, а затем заставил Редактор заполнить остальную часть экрана. Я почти достиг этого, однако, как вы можете видеть на скриншотах, есть вертикальная полоса прокрутки, которая показана, потому что вам нужно прокрутить вниз главное окно, чтобы увидеть нижнюю часть редактора (где находится горизонтальная полоса прокрутки). Таким образом, выделение аква-текста больше не видно. Что нужно реализовать в CSS, чтобы первая строка всегда была видна сверху, и при этом была возможность вертикальной и горизонтальной прокрутки в редакторе без необходимости прокрутки в родительском окне?

Я пытался что-то сделать немного отличается от того, что показано здесь в JSFiddle. http://jsfiddle.net/rvq62hzp/3/

Код

HTML

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

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

1 Ответ

0 голосов
/ 07 марта 2020

Сложно ответить на ваш вопрос, потому что неясно, какие части примера важны для вашего дизайна и что можно изменить.

Если вы можете использовать display flex вместо таблицы, тогда решение очень простое: установите высоту source_table, чтобы заполнить все окно, и установите для родительского элемента редактора ace значение flex: 1 и position: относительный 

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%;
}

  
    
      Text
      

      Text
...