Community forum for knowledge and support

Updated 8 months ago

Known Limitation of Modals in Grid Layouts

At a glance
The community member is having an issue with using Modal UI elements inside certain layout components, specifically the "layoutXX_component" grid element. The modal seems to work as expected when placed outside of the grid, as a child of the section padding div. The community member is unsure if this is a known limitation of modals, and is asking if there is a workaround or parameter change that could help. In the comments, another community member suggests that the issue may be related to a z-index problem, and recommends using the Smart Lightbox attributes from Finsweet as a potential solution. The community member agrees to try these suggestions.

Hey All! Quick issue that may have a known solution - I'm trying to use versions of the Modal "UI" elements, placing them as cta's for expanded info inside of standard left-right layouts (Layout 16/Layout 207) But it seems the modal has an issue with being inside the parent "layoutXX_component" - the grid element. When moved up a level to be a child of the section padding div (relume out-of-the-box "padding-section-large") it works as expected.

Is this a known limitation of modals? That they will only function outside of a grid? or is there a workaround, parameter change that will help?

Thanks!

M
S
2 comments

without seeing a read-only link I can only assume two things.

One is that the modal and the CTA are being separated - which you can still make work you just have to tweak the interactions a little bit. Here's a video on how to do that.

Secondly, it may be a z-index issue. You'll want to use the Smart Lightbox attributes from Finsweet.

Let me know if either of those work or don't work. If they don't work, share a read-only link so I can take a peek and we'll go from there!

I'll give those a try. Thanks so much! I actually noticed it was not limited to the layouts implemented with a grid - it seemed to be anything in a component div - havn't figured out what parameter is common amongst them causing the problem but I bet it's what you're mentioning.

Thanks!

Add a reply
Sign up and join the conversation on Slack