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

Html – Elements inside of dialog element will not show up when outside of bounds of dialog

Problem

Wanted to create a dialog element that has an x button to close the <dialog> in the top-right. I was thinking I could use absolute position / transforms to accomplish it, but when the x button reaches outside of bounds, the part of it that is outside the parent <dialog> is not visible.

const openDialog = document.querySelector("#open-dialog")
const closeDialog = document.querySelector("#close-dialog")
const dialog = document.querySelector("dialog")

openDialog.addEventListener("click", () => {
  dialog.showModal();
})
closeDialog.addEventListener("click", () => {
  dialog.close();
})
html {
  height: 100%;
  width: 100%;
}

dialog {
  position: relative;
  height: 50px;
}

#close-dialog {
  position: absolute;
  background-color: pink;
  top: -10px;
  z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button id="open-dialog">Open dialog</button>
  <dialog>
    <buton id="close-dialog">x</buton>
  </dialog>
  <script src="script.js"></script>
</body>

</html>

Results

When I add top: -10px, it shifts the #close-dialog button up, and now only a part of it can actually be seen. The other part is fully hidden.

Tried:

  • Using z-index, didn’t work
  • Using transform: translateY(), didn’t work

Expected:

  • The #close-dialog should not be hidden
Tags:

2

Answers


  1. 0

    Change top:-10px; to top:0; and add right:0; in the close-dialog style.

    Login or Signup to reply.
  2. 0

    You can use overflow:visible, like this

    const openDialog = document.querySelector("#open-dialog")
const closeDialog = document.querySelector("#close-dialog")
const dialog = document.querySelector("dialog")

openDialog.addEventListener("click", () => {
  dialog.showModal();
})
closeDialog.addEventListener("click", () => {
  dialog.close();
})
    html {
    height: 100%;
    width: 100%;
  }
  
  dialog {
    position: relative;
    height: 50px;
    padding: -50px;
    overflow: visible;
  }
  
  #close-dialog {
    position: absolute;
    background-color: pink;
    top: -10px;
    z-index: 1;
  }
    <button id="open-dialog">Open dialog</button>
    <dialog>
      <buton id="close-dialog">x</buton>
    </dialog>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search