4 ms·
Thanks for the article! I remember I had a hard time trying to stretch dialog to full screen for mobile devices, but it actually didn't want to work. The code
by starikovs 2y ago
Thanks for the article!
I remember I had a hard time trying to stretch dialog to full screen for mobile devices, but it actually didn't want to work. The code was something like this:
dialog {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
- askew 2y agoYou can shorthand the last four declarations with a single `inset: 10px;` (or maybe `inset: .625rem;`?
- starikovs 2y agoThat's cool, actually I didn't know about this one :)
- skgough 2y agothis is most likely due to the absolute positioning. position: absolute will use the top-left corner of the closest ancestor that is "positioned" as the origin for it's layout [1]. If you want that origin to be the top-left corner of the viewport, use position: fixed. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...
- Lvl999Noob 2y agoIn addition to `position: fixed`, shouldn't it be top, left, height, width, instead of top, left, bottom, right? In the second case, it would follow the top and left instructions then take the necessary amount of space, ignoring right and bottom?
- nicoburns 2y agoFor absolutely positioned elements, if you set all four sides then the height and width will be automatically computed.