The line number display issue in the light box

[jack-gaojz-zz]

Describe the bug
If the codemirror in a lightbox, when the lightbox show, the codemirror linenumber display not correct:

But when I scroll the scrollbar, the line number will display well:

If I focus on it, then type the "Enter" key, the new line number will display well, the original still has the display issue:

I have set the "autoRefresh" property and reference the "autoRefresh" plugin:

var codeEditor = $(".code-editor");
var editor = CodeMirror.fromTextArea(codeEditor.get(0), {
	mode: "text/x-csharp",
	indentWithTabs: true,
	smartIndent: true,
	lineNumbers: true,
	lineWrapping: false,
	matchBrackets: true,
	autoRefresh: false,
	extraKeys: { "Ctrl-Space": "autocomplete" }
});

editor.setSize("auto", "200px");
editor.on("change", function() {
	$("#Expression").val(editor.getValue());
});

Another issue is the text area connot get the codemirror value, I have to get the value via handle the "change" event to archived it.

editor.on("change", function() {
	$("#Expression").val(editor.getValue());
});

And if I want to select some codes vai the mouse in the code mirror, the display UI not make sense and the select behavor not comfortable.

I try to use the "refresh()" to fix it, but still failed:

The first two columns will not display well.
editor.refresh();

BTW, if the codemirror in a normal page, it works fine.

Expected behavior

1. The line number should display well.
2. The code select should works fine.

Screenshots
Above all screenshots.

Desktop (please complete the following information):

• OS: Win 10 64bit
• Browser: chrome
• Version: 74.0.3729.108 (Official Build) (64-bit)

Additional context
Codemirror Version: 5.42.2

Thanks so much, the codemirror is a so amazing editor!

[monwolf]

I have a similar issue, It happens when the editor is loaded in a bootstrap navtab:

On the main tab is working fine:

I'm using the version 5.46.0

[jack-gaojz-zz]

@Berni69 I have fixed on my codes via adding the "setTimeout" to delay the codemirror load. I guess that because the codemirror calculate the html element size before they are visible. Once the html rendered, then initialize the codemirror, it will looks good.
FYI.

setTimeout(function () {
                var codeEditor = $(".code-editor");
                var editor = CodeMirror.fromTextArea(codeEditor.get(0), {
                    mode: "text/x-csharp",
                    indentWithTabs: true,
                    smartIndent: true,
                    lineNumbers: true,
                    lineWrapping: false,
                    matchBrackets: true,
                    autoRefresh: false,
                    extraKeys: { "Ctrl-Space": "autocomplete" }
                });

                editor.setSize("auto", "200px");
                editor.on("change", function () {
                    $("#Expression").val(editor.getValue());
                });
            }, 100);

[aishwaryardandi]

I have a similar issue with codemirror:

When the codemirror is inside an accordion and if lineNumbers is set to true then the data entered overlaps with the line numbers. Also if theres any data that is already available then it doesn't appear at first, it only appears when I click inside the codemirror and again, it overlaps with the line numbers.

[jack-gaojz-zz]

I have a similar issue with codemirror:

When the codemirror is inside an accordion and if lineNumbers is set to true then the data entered overlaps with the line numbers. Also if theres any data that is already available then it doesn't appear at first, it only appears when I click inside the codemirror and again, it overlaps with the line numbers.

Because of the accordion content panel don't have the height value when dom ready, the codemirror should know the container height and width to calculate the dom layout. If we want to fix this issue, we should use setTimeout to delay init the codeMirror and make sure the container dom element have the fixed width and height. That's my idea. FYI.

[Farshadi73]

I have same problem in modal and specific tab ....
I initialize editor after show that specific tab, by using jquery custom event difination

function onTabChange(element){
       ..... other code to handle show a specific tab
       element.trigger(tabname + '_active', tabname);
}

    // $editor defied globally
    $('body').on('your_tab_name_active', function () {

        if (typeof $editor === "undefined") {

            $editor = CodeMirror.fromTextArea(document.getElementById("landkit_code_code"), {
                mode: 'javascript',
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                lineWrapping: false,
                matchBrackets: true,
                autoRefresh: false,
                selectionPointer: true,
                styleActiveLine: true,
                direction: 'ltr',
                extraKeys: { "Ctrl-Space": "autocomplete" }
            });
        }
    });

[mennucc]

I have similar issue, I attach two proof-of-concepts, based on the trailingspace.html

trailingspace_booster_tab.html.zip

in this first example I added Bootstrap and two tabs, each with the same content (up to changing ids). As noted above by aishwaryardandi (on 30 Jul 2019), the second tab does not show the content at first, then after you click, the text is over the line numbers.

In the second example

trailingspace_booster_tab_2.html.zip

similarly to what Farshadi73 did , it triggers the CodeMirro code when the second tab is shown; the defect is that , each time you switch tab, a new editor pane is created; but as you see from the console , the code is run only once, so it is unclear where this behaviour is coming from.

EDITING there was a mistake in the second example. Now it works fine.

trailingspace_booster_tab_2.html.zip

The important point is to make sure that the CodeMirror code is called only once, as follows

<script>
  var editor2 = undefined;
  $('[href="#tools"]').on('shown.bs.tab',function(e) {
      if( editor2 == undefined) {
	  editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
	      lineNumbers: true,
	      showTrailingSpace: true
	  });
	  console.log("activated");
      } else 	{  console.log("already active") };
  });
</script>

To view the examples, unpack in the demo subdir.

Regards. a.