extreme size, margin and padding values

Hello,

I’m having some trouble with CodeMirror :

I’m using Bootstrap 3.3.6 and CodeMirror 5.40.2

Basically all divs in .CodeMirror have nonsense width, height and margin values.

.CodeMirror has displayed width: 517px and height: 345px, which is exactly what I want it to have. The problem comes with its children, which have stupid inline CSS like width: 0 and so on…

The parent div is just a .col-sm-12 div with nothing else in it. Nothing changes when I add editor.setSize(“100%”, “100%”); to the Javascript. If I set lineNumber to false, there is no extreme margin-left anymore, but still ridiculous sizes. (Simply made : the content displays 517px left)

I’m sure the error comes from me, but after looking for solution on the manual and on internet, without getting a working solution (I even asked on stackoverflow, nothing.)

The generated HTML :

<!-- 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>
                </pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 60px;"></div>
    <div class="CodeMirror-gutters" style="height: 90px; left: 10.5px;">
      <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 518px;"></div>
    </div>
  </div>
</div>
<!-- End of the codemirror code -->

And the 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;');
  });
});

Sorry to ask this here, but after several hours of try, re-try and working/not working code comparison, I think there might be a bug.

I’m using Firefox 62.0.3 on Windows 10, version 1703, build 15063.540

[adrianheine]

I’m closing this for now, please feel free to reopen if you end up with a small example demonstrating the issue 😃

[JeanMarcZimmer]

Honestly it’s been a year now, so the only thing that makes me remembering this is the time I spent on it. I never got to find a precise example, and as this was for a professional project, I chose to create a little system by myself instead of spending another week or two on this. I’m pretty proud of how it turned out, I have to say. Sadly the website isn’t accessible, I can’t show it.