This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
It would be good if <dialog> elements shown with showModal() filled the screen on handheld devices with small screens, at least if the viewport is at 1:1 scale (as opposed to when the browser is pretending to have a desktop size). One option would be: @media all and (max-width: AAA) { BBB { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; } } ...where "AAA" is some width that phones all match but tablets and desktops don't, and "BBB" is some magical selector to match modal dialogs. Anyone got any other ideas? If the above seems sound, what should AAA and BBB be?
The 'max-width' MQ bases itself on the window's width, not the screen's width, so it doesn't reliably detect *any* device. The 'max-device-width' MQ bases itself on the device's width, but devices occupy a wide and overlapping set of widths, plus if it makes sense for a narrow phone to get fullscreen dialogs, it probably makes sense for a narrow desktop window to do the same. What is the actual feature you're trying to discriminate against?
Well presumably it doesn't matter if you're on a small device or just a narrow window on a big device, the desired look is the same.
Tab suggests on IRC that BBB should be "dialog:modal", so: http://lists.w3.org/Archives/Public/www-style/2014May/0022.html
Ok, :modal is to be added to Selectors: http://lists.w3.org/Archives/Public/www-style/2014May/0056.html I'll add the detailed definition in HTML at #selector-modal. It seems, based on reading sites about responsive design, that we should probably put the cut-off at 540px (inclusive), so it will be: @media all and (max-width: 540px) { dialog:modal { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; } } That seem ok to everyone?
(In reply to Ian 'Hixie' Hickson from comment #4) > Ok, :modal is to be added to Selectors: > http://lists.w3.org/Archives/Public/www-style/2014May/0056.html > > I'll add the detailed definition in HTML at #selector-modal. > > It seems, based on reading sites about responsive design, that we should > probably put the cut-off at 540px (inclusive), so it will be: > > @media all and (max-width: 540px) { > dialog:modal { top: 0; right: 0; bottom: 0; left: 0; width: auto; > height: auto; } > } > > That seem ok to everyone? It still seems very weird to make a modal dialog full screen at some certain width--how can you be sure this is the right stylistic design for most modal dialogs? For example, my phone's meeting notification modal dialog is as wide as the screen, but not as tall--this gives me the "depth" clue that this is a modal dialog--otherwise, it might have looked like a navigation. If you must specify this default styling (which I'm not 100% sold on), then perhaps setting the default size to just inside of the device's display bounds would be better?
We could definitely have a margin on it, yeah. Also maybe making the height be auto, and pinning the dialog to the top? This is just the default styling. The idea is to avoid having modal dialogs by default just go off the side of the screen. I doubt most people will stick to this styling.
(In reply to Ian 'Hixie' Hickson from comment #6) > We could definitely have a margin on it, yeah. Also maybe making the height > be auto, and pinning the dialog to the top? > > This is just the default styling. The idea is to avoid having modal dialogs > by default just go off the side of the screen. I doubt most people will > stick to this styling. I'm no UX designer, but having auto-height (top-aligned) and a small margin sounds good for the default.
Checked in as WHATWG revision r8750. Check-in comment: Make the default styling for modal dialogs not overflow the device on small screens http://html5.org/tools/web-apps-tracker?from=8749&to=8750