Editing Ace monochrome fonts with cursor spacing

Question

I saw several problems with the wrong cursor position in the ace editor. The problem is related to the spacing between fonts and apparently the solution is to use only monospaced fonts.

Here is another question about the problem. ace editor cursor behaves incorrectly

My problem may have something to do with using the Bootstrap theme, but I'm not quite sure.

When I open the chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template uses fonts

input, textarea, input[type="submit"]:focus, div { outline: 0 none; font-family: 'Open Sans', sans-serif; } 

If I add my css

 .ace-editor { font-family: monospace !important; } 

I still have a problem with the wrong cursor position, and, oddly enough, the font used looks exactly like the "Open Sans" defined in Bootstrap.

A discovery in Chrome tools dev means that the computed property is "monospaced", so something should work, but it isn’t. That's where it gets really weird.

If I delete the font entries for .ace-editor and input, textarea... , I get a great looking font that works. Going to computed properties shows that the font family will again be "Open Sans."

So, the question I'm trying to answer is how can I either figure out which ACTUALLY font is used when I cancel a textarea entry from Bootstrap? Or why it does not accept a monospace font when it is specified.

I am somewhat suggesting that "Open Sans" may be monospace, but whatever it is, it still causes massive headaches.

Answer 1

The problem is caused by the div included in the bootstrap rule. It is too wide and violates character width measurements for the ace. You can add

 .ace_editor div { font: inherit!important } 

as a workaround. It would be nice to report the problem to the creator of your bootstrap template.