GoogleChrome / dialog-polyfill

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

Dialog width is not properly set in MS Edge as fit-content isn't supported #159

Closed GingerAdonis closed 4 years ago

GingerAdonis commented 6 years ago

Dialog width is not properly set in MS Edge as fit-content isn't supported.

Is there a workaround available?

FilipChalupa commented 6 years ago

After clicking on "Show modal" in the demo on Edge 16:

image

GingerAdonis commented 6 years ago

This is a simple CSS work-around that I came up with. I know it's far from perfect, but at least it's something.


//Workaround for Edge
dialog {
  @supports (-ms-ime-align:auto) {
    max-width: 400px;
  }
}
saschanaz commented 6 years ago

fit-content as a keyword is not in standard so we have to find some standard way to style it.

Note: This section previously defined stretch and fit-content as keywords representing the stretch-fit size and fit-content size, respectively. These keywords have been deferred to Level 4 (along with an additional contain keyword that behaves similarly to stretch but preserves the intrinsic aspect ratio, if any) to better work out the implications in situations with indefinite available space.

The Level 4 document is nearly a sketch.