[Joomla 4.0] Mosaico build screen clipped

[vingle]

Mosaico is loaded in an iFrame, with a fixed position that is lost behind the Joomla 4 UI:

Because J4 has an expanding/shrinking sidebar, then the following would fix this with an extended sidebar:

#crm-mosaico { left: 288px; top: 66px; width: calc(100vw - 288px); height: calc(100vh - 66px); }

and then this if not extended:

#crm-mosaico { left: 48px; width: calc(100vw - 48px); }

But there's no helpful Joomla classes to differentiate between these states via a parent selector (ie something targetable). One option would be container queries, but maybe the fixed position of the iframe creates issues on other CMSs too (ie anything with a sidebar?) and it's preferable to address that..?

[thoni56]

This is still a problem. Additionally which can be seen in the image, the adaptive calculation also needs to be applied to the height as Mosaicos own menu is hidden under Joomlas admin top menu.

[vingle]

Hmm, maybe the simplest fix is to change the markup to limit Mosaico to #crm-container and not let it 100% width to the full screen?

[thoni56]

Using the developer tools to move the iframe into #crm-container and changing its height and width to 100% seems to almost make it work. At least useable.

[vingle]

That sounds good @thoni56