Dynamic gutter width


I’m currently working on an usage of CodeMirror with multiple (10-15) different gutters. Each gutter column presents some meta information about each line of code (all numbers). The magnitude of these numbers vary quite a bit - sometimes the meta information is 1 digit, sometimes 20. My issue is to make the width of each gutter column dynamic to the size of the maximum width of its content in the same way that the line-numbers gutter vary in size depending on the maximum line number.

Any suggestion on how to achieve this? It seems like CodeMirror just inherits the width property from the specified CSS class (thus simple styling of the class is not solving my problem), and not the entire class. Thus it seems to be rather static.

Best regards,


The code is written with the assumption that gutters that are not the line number gutter have a constant width. You could dynamically change the CSS class for your gutter, or give it a different class, and then update the gutters option to force a recomputation of gutter width, but that’s all I can suggest.


Thanks for the incredible fast response. Probably I’m stretching the idea of gutters a bit for this, but I’ll find a workaround then :slight_smile: