Comment by starikovs
17 days 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; }
You can shorthand the last four declarations with a single `inset: 10px;` (or maybe `inset: .625rem;`?
That's cool, actually I didn't know about this one :)
this 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_...
In 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?
For absolutely positioned elements, if you set all four sides then the height and width will be automatically computed.