Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Line numbers appear outside gutter

See original GitHub issue

Setting a gutter, and then quickly hiding CodeMirror will cause it to incorrectly measure itself and display the gutter improperly.

gutterbad

HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CodeMirror: Gutter Issue</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <script src="../mode/javascript/javascript.js"></script>
    <link rel="stylesheet" href="../addon/lint/lint.css">
    <link rel="stylesheet" href="../doc/docs.css">

    <style type="text/css">
      .CodeMirror {border: 1px solid black; font-size:13px}
    </style>
</head>
<body>
    <h1>CodeMirror: Gutter issue</h1>
    <p>Clicking "set gutter" causes line numbers to be misplaced.</p>
    <div id="container">
        <textarea id="code" name="code">
function findSequence(goal) {
  function find(start, history) {
    if (start == goal)
      return history;
    else if (start > goal)
      return null;
    else
      return find(start + 5, "(" + history + " + 5)") ||
             find(start * 3, "(" + history + " * 3)");
  }
  return find(1, "1");
}
        </textarea>
    </div>
    <p>
        <button type=button onclick="setgutter()">set gutter</button>
        <button type=button onclick="cleargutter()">clear gutter</button>
    </p>
<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true
    });

    console.log('CodeMirror version: ' + CodeMirror.version);

    function setgutter() {
        editor.setOption('gutters', ['CodeMirror-lint-markers']);
        document.getElementById("container").style.display = "none";
        setTimeout(()=>{
            document.getElementById("container").style.display = "block";
        }, 100)
    }
    function cleargutter() {
        editor.setOption('gutters', []);
    }
</script>
</body>
</html>

This appears to be related to issue #1498, with the fix being to wrap alignHorizontally in a setTimeout. This makes working with CodeMirror very hard, because it forces me to leave CodeMirror onscreen longer than I might like, or to perform an expensive refresh every time I show it.

Issue Analytics

State:
Created 7 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

4reactions

marijnhcommented, Nov 30, 2016

You’re expected to call .refresh() after un-hiding the editor (unless you can be sure that it was in a fully coherent state before it was hidden, and its size hasn’t changed).

0reactions

marijnhcommented, Dec 15, 2016

Indeed, I also can’t reproduce #1498 anymore with the current code. A bunch of things changed in the updating code in the meantime, so I assume the timeout really isn’t necessary anymore. Removed it in attached patch.