Ace editor cursor position has space between expected position and the current position

Hi,

I have used Ace editor a few times in my previous projects. Never did I face this problem before of having my cursor misplaced in my Ace editor. Let me guide you step by step

Editor markup

Here is a markup where I want my Ace editor to show up.

Then I have this CSS that applies to the editor element

CSS

Above CSS allow my editor to take entire space within the document body or relatively positioned container.

Then comes the Javascript to do its magic

Now the editor will show up and I am able to do my thing. However I now have a unique issue where when I start to type the cursor position is a bit far from the text, so basically I have a gap between the expected and actual cursor position in my Ace Editor as shown below

It turned out that Ace editor must use monospace font and I was setting fonts on a not so recommended way as shown below

Just to check things out and enforcing my editor to use monospace font fixed the issue instantly. This is what I changed my styles for my editor instance to which solved it.

I also ended up cleaning the way I was applying my fonts to all my elements by getting rid of * construct.

I hope this helps