We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
TIL: Styling an HTML dialog modal to take the full height of the viewport. I spent some time today trying to figure out how to have a modal
<dialog>
element present as a full height side panel that animates in from the side. The full height bit was hard, until Natalie helped me figure out that browsers apply a defaultmax-height: calc(100% - 6px - 2em);
rule which needs to be over-ridden.Also included: some spelunking through the HTML spec to figure out where that
calc()
expression was first introduced. The answer was November 2020.
continue reading on simonwillison.net
⚠️ This post links to an external website. ⚠️
If this post was enjoyable or useful for you, please share it! If you have comments, questions, or feedback, you can email my personal email. To get new posts, subscribe use the RSS feed.