CodeMirror-sizer margin-left равно ширине родительского элемента - PullRequest
Новая
       15

CodeMirror-sizer margin-left равно ширине родительского элемента

0 голосов
/ 24 октября 2018

Я использую Bootstrap 3.3.6 и CodeMirror 5.40.2

В основном все div в .CodeMirror имеют бессмысленные значения ширины, высоты и полей.

.CodeMirror отображает width: 517px и height: 345px, и это именно то, что я хочу.Проблема возникает с его потомками, которые имеют тупой встроенный CSS, такой как width: 0 и т. Д. ...

Родительский div - это просто .col-sm-12 div, в котором больше ничего нет.Ничего не меняется, когда я добавляю editor.setSize("100%", "100%"); в Javascript.Если я установлю lineNumber на false, крайнего запаса больше не останется, но все равно смешные размеры.(Просто сделано: содержимое отображает 517 пикселей слева)

Итак, мой вопрос основан на: «Где я что-то упустил при использовании CodeMirror?»

Вот код:

HTML: 

<code><!-- My code -->
<label for="sql-input">SQL :</label>
<textarea class="form-control code-textarea" rows="10" id="sql-input" style="display: none;"></textarea>
<!-- Start of the codemirror stuff -->
<div class="CodeMirror cm-s-default">
  <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 38px; left: 507px;">
    <textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1px; height: 1em; outline: currentcolor none medium;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" wrap="off"></textarea>
  </div>
  <div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; pointer-events: none; display: block; bottom: 0px;">
    <div style="min-width: 1px; height: 108px;"></div>
  </div>
  <div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="display: block; right: 0px; left: 517px; height: 18px; pointer-events: none;">
    <div style="height: 100%; min-height: 1px; width: 518px;"></div>
  </div>
  <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
  <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
  <div class="CodeMirror-scroll" tabindex="-1" draggable="true">
    <div class="CodeMirror-sizer" style="margin-left: 517px; margin-bottom: 0px; border-right-width: 30px; min-height: 60px; min-width: 13.5px; padding-right: 0px; padding-bottom: 0px;">
      <div style="position: relative; top: 0px;">
        <div class="CodeMirror-lines" role="presentation">
          <div style="position: relative; outline: currentcolor none medium;" role="presentation">
            <div class="CodeMirror-measure">
              <span>
                <span>
                  ​&bull;
                </span>
                x
              </span>
            </div>
            <div class="CodeMirror-measure"></div>
            <div style="position: relative; z-index: 1;"></div>
            <div class="CodeMirror-cursors" style="">
              <div class="CodeMirror-cursor" style="left: 10.5px; top: 0px; height: 39.5667px;">
                &nbsp;
              </div>
            </div>
            <div class="CodeMirror-code" role="presentation">
              <div style="position: relative;">
                <div class="CodeMirror-gutter-wrapper" style="left: -506.5px;">
                  <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 15px; width: 518px;">
                    1
                  </div>
                </div>
                <pre class=" CodeMirror-line " role="presentation">
                  <span role="presentation">
                    <span cm-text="">
                  ​    ​&bull;
                    </span>
                  </span>

JS: 

var editor = document.getElementById('sql-input');
$("#sql-input").each(function (i) {
  editor = CodeMirror.fromTextArea(this, {
    lineNumbers: true,
    mode: 'sql'
  });
  editor.on("change", function() {
    document.getElementById('question-preview').innerHTML = editor.getValue('<br>')
      .replace('<?','&lt;?')
      .replace('?>', '?&gt;')
      .replace('<script>', '&lt;script&gt;')
      .replace('<script>', '&lt;/script&gt;')
      .replace('<div>', '&lt;div&gt;')
      .replace('</div>', '&lt;/div&gt;');
  });
});
...