Cursor/ Mouse pointer doesn't seem to update at correct location in the editor

[saurabhchavan]

Issue: The edit happens at the incorrect location on the editor.

Package Version: Angular 6

 <ace-editor 
          id = "editor"
          #editor class="editor"
          [readOnly]="false"
          [mode]="'json'"
          [theme]="'monokai'"
          [autoUpdateContent]="false"
          (textChanged)="onChange($event)" 
          [options]="options"
          [(text)]="text"></ace-editor>

// editor
import 'brace';
import 'brace/theme/monokai';
import 'brace/mode/json';

  @ViewChild('editor') editor;
  @Input() text;

 options: any = {
    showPrintMargin: false,
    showInvisibles: true,
    highlightGutterLine: false,
    highlightActiveLine: false,
    fadeFoldWidgets: true,
    showLineNumbers: true,
    howGutter: true,
    fontSize: 16,
    wrap: false,
    mode: 'ace/mode/json'
};

  onChange(event) {
    this.text = event;
  }

[itaimoorali]

@saurabhchavan any Update on this. i am having the same issue. Do you have any workaround.??

[saurabhchavan]

No I couldn’t get it to work. So I switch to using monaco editor.

[hunghoang94]

The solution is to add this CSS to your code. Because ng2-ace-editor only accept monospace font

.ace_line {
    span {
      font-family: monospace !important;
    }
  }

[javadoffuad]

::ng-deep { .ace_line, .ace_line span { font-family: monospace !important; } }