Ace editor, cursor position is above the actual text

Question

I have this code in Razor page:

<td>
      <textarea class="MSSQL" id="MyId">
          My code
      </textarea>
</td>

And I'm using jquery to build the ace editor:

$('textarea.MSSQL').each(function () {
            var textarea = $(this);
            console.log(this);
            var editDiv2 = $('<div>', {
                position: 'absolute',
                width: "100%",
                height: "200px",
                'class': textarea.attr('class'),
                'Id': textarea.attr('id')
            }).insertBefore(textarea);
            textarea.css('visibility', 'hidden');
            var editor1 = ace.edit(editDiv2[0]);
            editor1.getSession().setValue(textarea.val().trim());
            editor1.getSession().setMode("ace/mode/sql");
            editor1.setTheme("ace/theme/sqlserver");
            editor1.setReadOnly(true);
            editor1.getSession().setUseWrapMode(true);
        });

Everything is working fine, except the cursor of the editor, his position is above the actual text, I've googled about the problem, most of cases are that the cursor is a few steps in the right or in the left of the actual text and the solution was to change the font to monospace. But it is not the case here. Any suggestions?!

Blockquote

Answer 1

I found the problem in the main css file, there was a code that changing the Line-height of the the span, and because the ace editore set every single word in a span so that was causing the problem of the position.