Positioning dialog elements

JavaScript
1

I have text inputs inside a dialog.
When I show it as a modal dialog it renders central both vertically and horizontally.
I need to drag some text into an input field so I close the dialog and then show it non-modal. The dialog now renders centrally horizontally but it is now rendered at the top of the page.
I attach the dialog as a child element to a normally empty div element which is the first child of the body element.
Having the dialog jump up to the top of the page and down again is very distracting.
Does anyone know how to keep the dialog entered in both axis?

2

It’s quite easy to center an element on a page these days. Does this help?

1 Like
3

Unfortunately the html5 dialog element is not in the DOM. It exists in its own layer which is above the rest of the page.
Also in the user-agent-stylesheet the normal dialog element is absolutely positioned whereas the modal dialog is fixed position. Which explains why the positioning is different.
The answer is to include the following css rule:

dialog {
  inset: 0.5rem;
  margin: auto;
}

When changing from modal to normal the dialog moves horizontally about 1 rem to the left. Further changes either way do not change the dialog position.
I think that I can live with that.

4

That would only work if your page has not scrolled as position: absolute is only placed in relation to the nearest positioned ancestor (or :root if none exists). . If you want it exactly to match the original then you could set it to position: fixed also.

At the end of the day its just css that manages the position of the non modal version so you should be able to match pretty closely assuming they are the same size etc.

Very roughly: :slight_smile:

5

Thanks, css isn’t one of my strong points.

1 Like