Material-components-web: MDC-Web Dialog Width on Desktop/Tablet

[ronnieroyston]

Material Design Dialog guidelines do not address dialog width on tablet or desktop sized viewports. I read somewhere that increments of 56px should be used but don't know if that's consensus or not.

The HTML inputs I require on my dialog are simply too small for the default sized dialog. It just looks unrefined and I don't want to stretch my input widths too far either to fill the dialog.

Any recommendations on some basic CSS to size the dialog? Maybe a sm, md, lg type of solution? Should I use increments of 56px or?... Thanks in advance.

[amsheehan]

I would recommend putting a custom classname on the mdc-dialog__surface element and write some custom style to shrink the dimensions of the surface. We currently have no plans to add modifier classes to solve this. Even if we implemented multiple modifier classes, I suspect the same issue would occur as frequently as it would if we didn't. If we're adding three different default sizes as opposed to one, it may magically line up with some specific implementations, but certainly not all.

[ronnieroyston]

got it thanks

On Tue, Sep 19, 2017 at 2:56 PM, Alex Sheehan [e-mail]
wrote:

Closed #1322
https://github.com/material-components/material-components-web/issues/1322
.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/material-components/material-components-web/issues/1322#event-1256188310,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMKS-xdbTjq8LSvQzBiNCRQG656R9eFrks5skByCgaJpZM4PaNfP
.

--

• Ron Royston
  [phone]
  https://rack.pub

[Garbee]

For some clarity on the spec here...

It has never declared a tablet/desktop size. It always defaulted to the mobile size of 5 blocks of 56px increment for a 280px wide dialog. In recent updates though, this has changed. Now, you may either:

• Use a set of blocks at any increment to size things. Increments are used to keep proportions as you scale.
• Have a defined spacing from the edges of the screen.

These both are explicit for mobile. However, only one allows for automatic scaling to a decent desktop size if your content scales as well. So it seems to me the choice was made to go with screen distance for the build-in responsiveness to fit many use-cases. If you have a specific need for a direct size on tablet/desktop, then manually coding an incremented width against the dialog is necessary.

In this case in particular; I think a combination of using the full-width modifier on the textfields along with manually sizing the dialog are a potent combination. Your form will look like a snug fit into the interface with just enough whitespace to make it pleasing and usable.

[ronnieroyston]

👍 https://en.wikipedia.org/wiki/%F0%9F%91%8D

On Wed, Sep 20, 2017 at 5:01 AM, Jonathan Garbee [e-mail]
wrote:

For some clarity on the spec here...

It has never declared a tablet/desktop size. It always defaulted to the
mobile size of 5 blocks of 56px increment for a 280px wide dialog. In
recent updates though, this has changed. Now, you may either:

• Use a set of blocks at any increment to size things. Increments are
  used to keep proportions as you scale.
• Have a defined spacing from the edges of the screen.

These both are explicit for mobile. However, only one allows for automatic
scaling to a decent desktop size if your content scales as well. So it
seems to me the choice was made to go with screen distance for the build-in
responsiveness to fit many use-cases. If you have a specific need for a
direct size on tablet/desktop, then manually coding an incremented width
against the dialog is necessary.

In this case in particular; I think a combination of using the full-width
modifier on the textfields along with manually sizing the dialog are a
potent combination. Your form will look like a snug fit into the interface
with just enough whitespace to make it pleasing and usable.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/material-components/material-components-web/issues/1322#issuecomment-330805980,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMKS-2VNA_LIJr_PerzTZtOdxlt6vskJks5skOKWgaJpZM4PaNfP
.

--

• Ron Royston
  [phone]
  https://rack.pub