Angular json editor code view text caret misalignment with text

616 Views Asked by At

I have started to use JSON editor library and angular wrapper from angular-tools/ng-jsoneditor.

The bug appears to be very annoying when switched to code view. Anyone had something similar?

Situation image

Situation image 2

Happens only when quotes appear on that line. Thats pretty every line for a JSON.

Using standart lib, nothing changed. I'm running out of ideas.

controller

$scope.obj = { data: null, options: { mode: 'code' } };

$scope.onLoad = function (instance) {
    instance.expandAll();
};

view

<!DOCTYPE html>
<html ng-app="jsonapp" ng-controller="jsonController">
<head>
    <meta charset="utf-8" />
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta content="charset=utf-8">

    <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
    <div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="height:800px"></div>
</body>
</html>
1

There are 1 best solutions below

0
Misha Beskin On

I had a similar problem, after a few hours of investigation finally I find that what causing it was the font-family style(I had global font for all app). So I override it with ng-deep:: to font-family: monospace. This was a solution in my case!