How to change the line height in ACE Editor

Recently a user of my Pocket Editor App for Android reported an issue related to the line height of the editor, which seemed to cut some characters on his device. After testing and researching for a while, the best solution I came up with was to allow the user to define the line height of the editor manually so depending on his needs, the line height could be greater or lesser to adjust the editor for the device resolution.

In Ace editor this should be done automatically when you adjust the font size, however as mentioned in some mobile devices it doesn't work as expected by the user. To solve this, you may simply adjust the CSS property line-height of the container element of ACE editor (the initialization container), for example if you want to do adjust it dynamically with JavaScript (adjusting the CSS property):

<!-- Ace Editor Container -->
<div id="editor"></div>

<script>
    // 1. Initialize Editor
    let editor = ace.edit("editor");
    
    // 2. Set the Line Height of the Container
    editor.container.style.lineHeight = "2em";
    // You may use the CSS unit you want to adjust the line height e.g.:
    // editor.container.style.lineHeight = "36px";

    // 3. Force Update of the Font Size 
    editor.renderer.updateFontSize();
</script>

Alternatively you may specify the line height with plain CSS:

<style>
    #editor{
        line-height: 2em;
        /* You may use the CSS unit you want to adjust the line height e.g.:*/
        /* line-height: 36px; */
    }
</style>

<!-- Ace Editor Container -->
<div id="editor"></div>

Happy coding ❤️!