My gutter marks appear outside the gutter


I have linked an image to best show my problem.
I am trying to develop some kind of custom invoice viewer/editor, which would show fixedLength text files, with each field highlighted differently thanks to CodeMirror, to be able to distinguish them.
However, I would also be able to show where errors are, once they are detected in the back-end, in the same way as an IDE.
I used setGutterMarker, in the exact same way as in the breakpoint demo, but the dots appear on the outside of the gutter, to its right side.
I tried reading the content of the lint addon, but couldn’t see changes in the gutter. Using its CSS to have the more known red icons for the errors doesn’t change anything, and I would like to keep on going with them.
I have read that the size of the gutter is changed dynamically to adapt to the line numbers and the marks, but using the refresh function didn’t change anything.
In every demo, the gutter appear wider, the line number always have a margin or are centered, and the mark either appear from the left or the right of the line number.
Mine always appear to the right, overlapping the text.

Could you help me?

Ideally, I would like to copy what was done in the lint addon, which is to show the line where errors are present, and be able to mouseover the error icons to show its description, but solving my current problem is way more important.



You have to set a fixed width for your gutter class, using CSS, otherwise it won’t take up any space and thus markers added to it will show up outside of the gutter (or in the next gutter).


Thank you very much!

Any more idea for the tooltip?