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.

Unbounded

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)

Hegira

Thanks mate... So this was the issue. Thank you very much. – Unbounded

#1078 isn't really related, it's about bad looking font, not misalignment – Hegira

Thanks, this explains the odd behavior I experienced with a carelessly added * { font-family: Open Sans } CSS rule, which of course changed the font to non-monospaced, but wasn't all that apparent. – Unquestionable

My case was * { font-family: ... } so .ace_editor * {font-family: ...} do the job for me. – Catchy

Thanks, but any solution if we want any other fonts in ACE? – Rebutter

Could you please take a look at #65603763? I have tried all tricks including your suggestion but nothing is working. – Citify

Answer 2

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

Moment

Could you please take a look at #65603763? I have tried all tricks including your suggestion but nothing is working. – Citify

Answer 3

My same issue solved this way:

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

Beautify

Could you please take a look at #65603763? I have tried all tricks including your suggestion but nothing is working. – Citify

Answer 4

Have the same issue and fixed it:

.ace_editor, .ace_editor div {
    font-family:monospace;
}

Crank