htmlcssdialog

How to position HTML dialog element at bottom of page with full width?

I'm trying to position an HTML <dialog> element at the bottom of a page and I want it to stretch across the entire viewport width.

Here's the CSS I tried so far.

#dia {
  padding: 0;
  border: 0;
  margin: auto 0 0 0;
  width: 100%;
}

It mostly works. It moves the dialog to the bottom left corner of the page.

However, the dialog doesn't reach the right side of the viewport.

enter image description here

JSFiddle: https://jsfiddle.net/b078wk6m/

Any ideas on why it's stopping short of the right edge? And how I can get it to reach the right edge for any screen width?

Solution

  • Some browsers automatically add styles to dialogs as u can see in the screenshot, enter image description here

    You should overwrite the max-width and make it max-width: 100%; that should work!