Ace editor monospace fonts issues with cursor spacing

Question

I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.

Here's another SO question about the issue. ace editor cursor behaves incorrectly

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

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

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

If I add to my css

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

I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.

Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.

If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works. Going to the computed properties, is shows the font-family to once again be 'Open Sans'.

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

I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.

Answer 1

The issue is caused by div included in bootstrap rule. It is too broad and breaks character width measurements for ace. You can add

.ace_editor div {
    font: inherit!important
}

as a workaround. Would be good to also report an issue to the creator of your bootstrap template.