ace editor cursor behaves incorrectly

Question

I am using Ace editor in my project.

CSS:

#editor {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:white;
}

JavaScript:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/java");

#editor is contained in a relatively positioned div.

The problem is hard to explain but I'll try.

Whenever I type text in Ace as the line size increases the spaces in the cursor's actual position and it's expected position increases.

For example when I type "This is text" it shows like this:

This is text           |

Now when I press backspace key it will delete last character on line 't', and will show:

This is tex           |

I have searched about this issue on Google found one similar issue for chrome browser when zoom is set to 120. but I'm working on Firefox browser.

Answer 1

Ace can display only monospace fonts, The issue you describe can happen either if something changes font of the editor to non monospace, or assigns different fonts to different parts of the editor.

(There was a firefox addon on ubuntu wich was changing all fonts to non monospace)

Answer 2

My same issue solved this way:

 #editor *{ font-family : monospace !important;font-size: 16px !important;direction:ltr !important;text-align:left !important;}

Answer 3

I'm using mediawiki + chrome and encountered the same error.

Problem solved by using

.ace_editor, .ace_editor *{
font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}

in Mediawiki:Common.css