Line number is misaligned when we overwrite the text using setValue method

[Manoj-RG]

I have created a text editor in my application using Code mirror. The content of the text editor has to be fetched from DataBase, when I reopen the text editor in my application. I aslo have line number for the text editor in the left side.

The problem is when I overwrite the content using setValue method, the line numbers are misaligned. That is it get collapsed with the content.

The above image is the output which I get. The line numbers has to be in the left. But after calling setValue method, the line numbers moved out from left position and gets collapsed with the content

[silverwind]

I also noticed some strange gutter alignment recently, but only in the themes mdn-like and pastel-on-dark.

On Firefox, the line numbers look like this in mdn-like:

On Chrome, in pastel-on-dark, I see the whole gutter moved a few pixels to the right, leaving a small gap on the left:

It appears the inline style values get calculated incorrectly. On Chrome, CodeMirror-gutters gets left: 5px, and If I set it to 0, it looks correct.

Unfortunately, I can't reproduce in the demo and setValue seems to have no effect on the bug for me.

[silverwind]

I think I have an regression window here:

last good: 4.6.0
first bad: 4.7.0

@Manoj-RG can you confirm it works in 4.6.0 for you?

[silverwind]

Reverting cde95c4 fixes it for me.

[marijnh]

Can you provide a test HTML file that produces the issue? Calling setValue is done everywhere, and does not in general cause problems.

[silverwind]

Try my demo. Go to 'Prefs' above and set 'Editor Theme' to 'mdn-like'. The issue should be visible immediately (floating gutter in Chrome, gutter bleeding into text in Firefox). My demo runs CM 5.0 right now.

(If for some reason, the link doesn't open to a CodeMirror, nagivate to any other text file).

[marijnh]

Can you create a stand alone demo? The problem could be anywhere in the bucketloads of scripts and styles that that page is including. I am not going to sift through them.

[silverwind]

Can do, but I can assure you that no script touches CM positioning or gutter positioning.

[silverwind]

Still investigating, I got this rather interesting display:

The bugged lines have

left: 12px; width: 34px;

while the good ones have

left: 0px; width: 34px;

[silverwind]

Well, I was able to solve the issue about the floating gutter in Chrome it seems. I think the cause for it was that I did cm.setOption("theme", theme) before the theme's CSS was available. The theme sets a border-left: 6px, and I think CM didn't see that 6px border in .clientLeft yet when getDimensions ran before the theme was applied though CSS after an XHR.

The line number misalignment in Firefox is still unresolved. The left: 12px corresponds to two times the width of mentioned border, so i'd say it must be something about the border again.

[silverwind]

Dumping out the 3 vars in getDimensions shows a browser inconsistency in offsetLeft:

Firefox:

n.offsetLeft = 6
n.clientLeft = 0
gutterLeft =  6

Chrome:

n.offsetLeft = 0
n.clientLeft = 0
gutterLeft = 6

[silverwind]

Probably this: https://bugzilla.mozilla.org/show_bug.cgi?id=850684

@marijnh think you can work around that bug?

[silverwind]

Also, I think the left calculation is wrong even in Chrome with the border present. This is with 6px:

Setting it to 3px seems to be the correct value so it won't overflow.

[silverwind]

I'll see if I can provide a patch for Firefox, but I'd appreciate a workaround in the meantime :)

[silverwind]

Firefox build finally finished, turns out the miscalculation of offsetLeft is not caused by bug 850684. The fact that it doesn't show in the demo means to me that it must be another edge case related to the positioning of CM's parent nodes.

[silverwind]

I scanned all offset related bugs in bugzilla, and while there are at least 5-6 dupes of above bug, none matches our case.

I wonder if we could do without JS positioning on the line numbers. How about using CSS positioning like right: 0 on the line numbers inside the gutter? Would certainly be a lot less prone to browser bugs.

[marijnh]

So is there still a problem if you ensure that you don't use a theme that hasn't been loaded? And if so, for the last time, can you give me an HTML page that actually allows me to reproduce it? I need to be able to see a bug and poke at it in order to know what's going on.

[silverwind]

I'm not sure how much help a plain HTML would be. The bug is only happening in a seemingly rare condition where Firefox miscalculates offsetLeft. Been trying to reproduce in JSFiddle, but no luck so far.

#3098 (comment) is a separate bug, where the border of the gutter isn't taken into account when calculating line number width.

[silverwind]

Finally found the cause, it's box-sizing related. Minimal testcase for Firefox here:

http://jsfiddle.net/silverwind/ozrsqch2/6/

[marijnh]

Thanks! I've pushed two patches that should help here -- one to force CodeMirror-gutters to the right box-sizing, and one to fix a problem in the mdn-like theme, whose line numbers ended up 3px too much to the right.

[silverwind]

Awesome, thanks 👍

@Manoj-RG: Please verify. I'm not totally sure this change covers your issue.

[goyatparmod]

We have still same issue.... even thought we have .css with
-moz-box-sizing: content-box;
box-sizing: content-box;

[goyatparmod]

But When it hit line number 10 it automatically adjust content on screen properly.

[Manoj-RG]

@goyatparmod In my case, I was using the version 4.6.0 and I was not allowed to migrate to higher versions. I fixed this gutter issue by making the 'fixedGutter' parameter to FALSE. I don't know how it worked. I was trying multiple options and finally setting the 'fixedGutter' parameter to FALSE fixed my issue (same version 4.6.0).

@silverwind and @marijnh
Thanks for your awesome work

[mwileyTibco]

I had the exact same issue when displaying a CM element on an Angular-wrapped bootstrap tab that's hidden when the page loads (i.e. another tab is shown by default). When the user clicks on the tab with the CM element, the element would appear, but it would behave as @goyatparmod described (weird until you enter the 10th line). I figured I might have to call CM.refresh when the tab gets activated. The trouble was figuring out what event actually corresponded to the tab being activated. I found that the element wasn't hidden, so trying to react to element.show() didn't help. Rather, the element had width & height set to 0 until the tab it was displayed on became active. This actually might explain the weird CM behavior because it would have initialized with zero width and height. So instead of reacting to .show() I tried .resize() and it works. I suspect this might help you @goyatparmod because you're showing the code in a modal kinda like I'm showing it in a tab.

In essence the code looks something like this (sorry just off the top of my head here...)

<div id="target"></div>

var elem = $('#target');
var cm = CodeMirror(elem[0], {});
elem.resize(function(){
    if(elem.width() > 0){ cm.refresh(); }
});

[goyatparmod]

Thanks to marijnh....mwileyTibco..My problem is also solved ..I use https://codemirror.net/addon/display/autorefresh.js and autorefrsh:true and it work very well.
ui-codemirror="{lineNumbers: true,
lineWrapping : false,autoRefresh:true,
theme: 'paraiso-light',
styleActiveLine: true,fixedGutter:true,
lint:true, coverGutterNextToScrollbar:false,
gutters: ['CodeMirror-lint-markers'],
mode: 'javascript'}"

[stateoflux]

Whew! so glad I stumbled across post. I had the same issue as @goyatparmod and i've working on it for the past few hours trying to figure how to fix. Installing the "autorefresh" addon and setting the config option to true solved the problem for me.

[dcsaszar]

Could we please reopen this issue, as it seems to be present still?

I created a fiddle to reproduce. It shows another issue (CodeWarrior being not visible at all), but this isn't relevant here.

http://jsfiddle.net/TcqAf/184/ tested with Firefox 42.0

[marijnh]

No we can't reopen the issue. Use refresh() or autorefresh, as described in the previous discussion.

[tedwong]

@dcsaszar did u solve the issue?

[dcsaszar]

@tedwong The quick fix was using codemirror/addons/display/autorefresh and autoRefresh: true, as mentioned in #3098 (comment)

I later fixed it by initializing the editor at a later point in time, when the page rendering was more complete. I don't remember the specifics.

[rochapablo]

scttcper/ngx-codemirror#288