JSON Editor Cursor Position is wrong

[Haim]

When entering text the cursor seem

The blue line shows where the cursor should be, but instead it's located like 5 chars to the right,
making it difficult to edit JSONs

[Kabirdas]

Hey @Haim!

This seems like a bug but I haven't been able to reproduce it on my end Is this happening with every JSON editor in your instance? Would you mind sharing the configuration of one?

[Haim]

Happens even for a fresh JSON Editor dragged from the right pane.
Analyzing it from a DOM perspective, the transform: the ace_cursor div has fuzzy transform: translate(4px,0px); operations... the x axis jumps are sometimes 11px and sometimes 7px.

Let me know if there's anything I can help with

[Kabirdas]

this seems to reproduce with different fonts, have you set the font for your app using custom CSS by any chance?

Could you try setting the font of the JSON editor specifically using the following CSS and let me know if that helps the issue?

#jsoneditor * {
  font-family: "Roboto Mono", SFMono, consolas, moaco, monospace
}

[Haim]

@Kabirdas

#jsoneditor * {
  font-family: "Roboto Mono", SFMono, consolas, moaco, monospace
}

This solves the issue, however, had to add a !important. I'll fix it tho, Thanks!

[kk_retool]

@Kabirdas tried this on custom css in setting section but it reports error. The css looks perfectly fine to me tho

[joeBumbaca]

Hey @kk_retool! I'll submit a bug report for the linting error. But this does still seem to work / affect the app. Are you seeing the font change applied?