Styling issues in Simplicity theme in Joomla 4/5

ilewing

After upgrade to Joomla 4 (and 5), Simplicity theme does not support Popovers, Accordions and Modal widths anymore. The work nicely in Joomla 3, but it seems that the structure has changed and the styling does not apply anymore. All these three features work in Cassiopeia.

Examples can be seen on the linked (secured) sites, old and new.

Accordion issues can be seen on /index.php?option=com_shop&view=products&Itemid=181
In Joomla 4/5 everything is hidden.

Popover issue requires login.
Old site path: /index.php?option=com_shop&view=cartitem&layout=form&cartitem=0&product=2&Itemid=181
New site path: /index.php?option=com_shop&view=cartitem&layout=edit&cartitem=0&product=2&Itemid=181
Field "Syntymäaika" has a popover, and it works on J3 site but not on the new one.

Modal issue can be seen on the same page as the Popover issue. Link "leiriehdot" at the end of the form opens up a modal. Width cannot be adjusted in J4/5.

We hope these could be fixed.

saguaros

ilewing Field "Syntymäaika" has a popover, and it works on J3 site but not on the new one.

Modal issue can be seen on the same page as the Popover issue. Link "leiriehdot" at the end of the form opens up a modal

I can't find these place for popover and modal, could you share screenshots highlighting it?

saguaros

Could you grant super admin permissions for provided account so I can access backend of your site and check for you?

ilewing

saguaros
Sure, addded them as FTP username and password

saguaros

I still can't access backend of your site, could you check again?

ilewing

saguaros
Should be working. Please use the username and password I gave as FTP username and password. The other, older account is still just registered user without admin access.

saguaros

ilewing Where is this com_shop from? as I don't see it in Joomla extension directory

ilewing

saguaros
It's a custom component. It uses the bootstrap accordion:
HTMLHelper::('bootstrap.startAccordion', 'products', ['parent' => true, 'active' => $activeSlide]);
HTMLHelper::('bootstrap.addSlide', 'products', $product->location, $slideId);
HTMLHelper::('bootstrap.endSlide');
HTMLHelper::('bootstrap.endAccordion');

saguaros

Our team updated this file on your site to fix the issue: /templates/gk_simplicity/css/bs-modal.min.css

bs-modalmincss.zip

2kB

Kindly check.

ilewing

saguaros
Nice! Now the accordion works and looks good.
How about the popover and modal width?

ilewing

This message is visible to Moderators only

hidden content

saguaros

ilewing Let me check and will get back to you.

ilewing

saguaros Any progress on this?

saguaros

ilewing I can see the modal popup when hitting that link, could you check again?

ilewing

saguaros Yes, the modal opens, but the width definitions are not applied to it.
Modal is initialized with HTMLHelper:
HTMLHelper::(
'bootstrap.renderModal',
'ModalTerms',
[
'url' => $articleUrl,
'height' => '750px',
'width' => '500px',
'modalWidth' => 50,
'footer' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">'
. Text::('JLIB_HTML_BEHAVIOR_CLOSE') . '</button>',
]
);
Neither of the width definitions, width or modalWidth, have no effect.

ilewing

saguaros Popovers are the ones that doesn't work at all.

saguaros

ilewing HI

Where can I see that popover? could you check the Cassiopeia and see if it works?

ilewing

This message is visible to Moderators only

hidden content

saguaros

ilewing Let me check and will get back to you.

saguaros

We updated this file for the Popover: /templates/gk_simplicity/css/legacy.css

legacycss.zip

6kB

Kindly check.

ilewing

saguaros They are working! Very good, thank you!