This isn’t the first time I’ve had a question regarding the modal container. I’m not nearly experienced enough to understand why it behaves the way it does. And no, it does not behave like a plain div.
Maybe it’s because it has a fixed position, and it’s very nature requires that it’s a compound element made up of 3 nested divs. But I can never seem to be able to place elements in a modal with any confidence that the layout will work the way I intend it to the first time. It always takes quite a bit of trial and error.
My current use case is a modal that contains a large gallery (it is longer than the screen, so scrolling is needed). I simply cannot get a padding to work at the bottom of any of the containers. Tried them all. The only place that worked to give what I needed was to apply a padding-bottom to the gallery block.
I’m sure it’s not a bug, but it continues to be frustrating to have the wrong idea of what an element’s behaviour is supposed to be.
I’m sorry to hear you’re still having trouble figuring out how the modal works.
Reviewing the different property layout in the Primary tab, removing the sizing properties from the Modal Style tab might help remove this confusion.
There are 2 elements you control in the Modal block:
The modal wrapper → this is where the flex properties in the Modal Style tab apply, and allow you to position the block container however you choose.
The block container → all other styling properties apply to this container, which acts just like a div.
So far the modal worked well for me.
Have you checked the overflow was fine in the “visual” tab (glasses icon).
What are your browser dev tools telling you?
Always add an overflow of auto to the modal, so the content can grow, regardless of the content or the device size itself, as @AnthonyKeller pointed out correctly.
@Louis summarized it perfectly and everything to consider was already mentioned here.
I re-built your use case and didn’t face any issues.
If you can tell us where you get stuck exactly, you will get pointed in the right direction.
It turns out that sizing the modal is what causes the issue. Specifically giving it a height. By removing the height, I was able to get it to work fine.
Thing is, I only needed the modal to take up 90% or so of the screen, instead of covering it (or going from top-to-bottom, so I might have
There’s likely something in the CSS spec that covers this. Too short on time to investigate at the moment.
