Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gutter issues after the change "Add coverGutterNextToScrollbar option" #1498

Closed
dsmall opened this issue May 4, 2013 · 5 comments
Closed

Gutter issues after the change "Add coverGutterNextToScrollbar option" #1498

dsmall opened this issue May 4, 2013 · 5 comments

Comments

@dsmall
Copy link

dsmall commented May 4, 2013

Applies to commit 9d92920

I'm attempting to enable "lintWith" for javascript files but not for HTML. With any commit between v3.12 and the commit before this one, I could switch between file types. From this commit onwards, the gutters are initially drawn incorrectly as shown in the screenshots. If you reload the file, it is then drawn correctly. This is a single instance of the editor. The tabs switch between two documents using cm.swapDoc (which works brilliantly). However these screenshots are immediately after reloading the file. The loading sequence is:

  1. cm.setOption(mode)
  2. If mode is javascript cm.setOption('gutters', ["CodeMirror-lint-markers"]) followed by cm.setOption('lintWith', CodeMirror.javascriptValidator)
  3. Otherwise cm.setOption('gutters', []) followed by cm.setOption('lintWith', false)
  4. cm.setValue(text-from-file)

It seems that this change has altered the way the gutter widths are calculated

gutter_issues
@marijnh
Copy link
Member

marijnh commented May 4, 2013

Could you give me a minimal html page that helps reproduce the problem? Or alternatively, can you see whether adding a third argument, true to the call to option that defines the new option helps? And, failing that, whether removing the line that that patch adds to guttersChanged makes a difference?

@dsmall
Copy link
Author

dsmall commented May 5, 2013

Here is an example which runs from the codemirror/demo directory. With CM v3.12 it works as expected but after
commit 9d92920 the first button click redraws the gutter incorrectly and you have to click the button a second time to get the desired effect.

<!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>
    <link rel="stylesheet" href="../theme/cobalt.css">
    <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>CM v3.12 is fine but after the commit "coverGutterNextToScrollbar" you have to set the gutter twice</p>
    <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>
    <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,
        theme: 'cobalt'
    });

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

    function setgutter() {
        editor.setOption('gutters', ['CodeMirror-lint-markers']);
    }
    function cleargutter() {
        editor.setOption('gutters', []);
    }
</script>
</body>
</html>

@dsmall
Copy link
Author

dsmall commented May 5, 2013

Looking at your other suggestions:

  1. If option fixedGutter is set to false, the buttons in the demo work as expected
  2. Can't make option coverGutterNextToScrollbar do anything

The problem seems to be in the left position of the CodeMirror-gutters element, for example here it is with the problem but when you click the "set gutter" button a second time, it changes to 0px:

<div class="CodeMirror-gutters" style="left: 16px;">
    <div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div>
</div>

@marijnh marijnh closed this as completed in a48b5d7 May 6, 2013
@marijnh
Copy link
Member

marijnh commented May 6, 2013

Thanks for the reproduction code. See attached patch for a fix.

@dsmall
Copy link
Author

dsmall commented May 6, 2013

Thank you for the quick fix and confirming that gutters are agaiin working as expected.

@JoelEinbinder JoelEinbinder mentioned this issue Nov 30, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@marijnh @dsmall