search

GoogleChrome / dialog-polyfill

Polyfill for the HTML dialog element
BSD 3-Clause "New" or "Revised" License
2.45k stars 245 forks source link

Improve support for `position: fixed` #97

Closed tleunen closed 8 years ago

tleunen commented 8 years ago

The native dialog seems to be in a fixed position, always centered horizontally and vertically... It would be a lot easier if it was the case for the polyfill as well.

jaasum commented 8 years ago

When it's in the open state you could use the following attributes to achieve this (on top of the base polyfill styles) 

dialog[open] {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}
samthor commented 8 years ago

The native dialog isn't actually fixed - it's centered in the current viewport when the dialog is first shown.

Having said that, applying position: fixed to the native dialog in Chrome causes it to always remain centered regardless of scrolling (although it's vertical center is calculated on show, not e.g. if the window is resized or device rotated).

The polyfill should therefore support automatic vertical positioning of position: fixed dialogs.

samthor commented 8 years ago

@jaasum I've basically added this CSS to the end of the top-level README.md as a hint.