Html Question posted in
Some basic documentation can be found here.

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?

Tags:

3

Answers


  1. 0

    there is a default max-width applied to dialog.

    document.addEventListener("DOMContentLoaded", function () {
    const btn = document.querySelector("#btn");
  const dia = document.querySelector("#dia");
  
    btn.addEventListener("click", function() {
    dia.showModal();
  });
  dia.addEventListener("click", function (e) {
    if (e.target === dia) {
        dia.close();
    }
  });
});
    #dia {
  padding: 0;
  border: 0;
  margin: auto 0 0 0;
  width: 100%;
  max-width: 100%; /* add this */
}
    <dialog id="dia">
  <p>hello world!</p>
</dialog>

<button id="btn">
  toggle
</button>
    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
  3. 0

    remove this property as per your code

      padding: 0;

    Before :

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

    After :

    #dia {
  border: 0;
  margin: auto 0 0 0;
  width: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search