Sidebar is not displayed correctly

[Sivolen]

Hello!
Tell me this point, if I set the height in the css to 100%, then my sidebar becomes somehow short and stops stretching to fit the text, what am I doing wrong?

<style type="text/css">
    html, body {
    height: 100%;
    margin: 0;
    }
    #compare {
        height: 100%;
        width: 100%;
    }
    .cm-s-custom-theme .CodeMirror-lines {
          font-size: 11pt;
}
</style>

[wickedest]

The supplied CSS isn't causing it. My guess is that the editor is being resized after initialization somehow. Mergely needs to calculate the hieght of lines and the width of the editor to render. I'd suggest you look at the examples for inspiration.

[Sivolen]

The supplied CSS isn't causing it. My guess is that the editor is being resized after initialization somehow. Mergely needs to calculate the hieght of lines and the width of the editor to render. I'd suggest you look at the examples for inspiration.

I create an object like this

    function initM() {
    return new Mergely('#compare', {
        license: 'lgpl-separate-notice',
        wrap_lines: true,
        line_numbers: true,
        sidebar: true,
        lcs: false, //full compared
        vpcolor: '#b3ecec',
        cmsettings: {mode: 'text/plain', readOnly: true, theme: 'custom-theme'},
    });
    }
    let mergely_instance  = null;
    function change(p_config, l_config) {
    if (mergely_instance) {
        mergely_instance.unbind();
    }
    mergely_instance = initM();
    mergely_instance.lhs(p_config);
    mergely_instance.rhs(l_config);
    }

[wickedest]

You aren't following the examples. See the documentation for asynchronous initialization. Either you unitialize mergely with the lhs/rhs editor content, or you need to wait for an updated event. Also, you can change the settings and editor content without having to bind/unbind.