bootstrap 5 - layout problem

[hegelab]

Hi,

If I use bootstrap 5 then litemol plugin's div covers the full screen.

<div class="col-6">somthing</div>
<div class="col-6"><div id="litemol"</div></div>

Do you have any solution? Thanks, Tamas

[dsehnal]

Hi, I am pretty sure you can tweak the CSS of the litemol element to fit inline. Also, when you create the instance of the plugin, do you set the expanded property to true or false?

[hegelab]

I tried to have <span> instead of <div>and also tried to set class=d-inline- did not work

I do not see expanded property in create: https://webchemdev.ncbr.muni.cz/LiteMol/SourceDocs/interfaces/litemol.plugin.plugincontrolleroptions.html I found layoutState : {isExpanded} I tried all variations, including:

let plugin = LiteMol.Plugin.create({
        target: '#litemol',
        viewportBackground: '#ffffff',
        layoutState: { hideControls: true, expanded: false }
    });

[dsehnal]

Sorry the property is called isExpanded indeed.

LiteMol.Plugin.create({
        target: '#litemol',
        viewportBackground: '#ffffff',
        layoutState: { hideControls: true, isExpanded: false }
    });

It's same usage as for example in https://github.com/dsehnal/LiteMol/blob/2ce0190a9b369841c1c3ee7322c2f5dda3e7800e/examples/Transforms/src/App.ts#L12

You can also try:

<div class="col-6" style="position: relative"><div id="litemol"></div></div>

The lack of relative position on the parent is probably what's causing your issue.

[hegelab]

style="position: relative" solved this issue. Thanks a lot!