Material-ui: [Dialog] fullWidth is capped by default 'sm' theme

Created on 3 Jan 2018 · 14Comments · Source: mui-org/material-ui

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When calling Dialog component with fullWidth=true and no other props I would expect the Dialog to take up the full width of the screen

Current Behavior

What's happening is because the of the defaultProps value for maxWidth is 'sm' the true width ends up being capped at 600px like so:

screen shot 2018-01-03 at 1 43 39 pm

I only noticed the issue when I accidentally put 'lg' a value which is not supported and noticed that it worked like I wanted it to

Steps to Reproduce (for bugs)

Open Dialog component with props fullScreen=true

Context

I would like to submit a PR if approved to check if there is fullScreen applied and no maxWidth prop provided to ignore the defaultProps of 'sm'

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.26 |
| React | 16 |
| browser | Chrome 63 |
| etc | |

Dialog enhancement good first issue

Source

gregnb

👍1

All 14 comments

@gregnb What about allowing the maxWidth property to be false?

I would like to submit a PR if approved to check if there is fullScreen applied and no maxWidth prop provided to ignore the defaultProps of 'sm'

You won't be able to know if the maxWidth property is coming from the default property or from the users. We need the default property for the documentation generation. Also, this behavior might not be the one expected by the users.

oliviertassinari on 3 Jan 2018

@oliviertassinari Ok thanks for that background information. What about something like this to make it clear to users:

 /**
   * Determine the max width of the dialog.
   * The dialog width grows with the size of the screen, this property is useful
   * on the desktop where you might need some coherent different width size across your
   * application. Set 'false' to turn off 
   */
  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', false]),

gregnb on 3 Jan 2018

👍1

Im getting an error if I put maxWidth as "lg", wich is working, but showing an error at the console

FernandoGOT on 13 Jul 2018

@FernandoGOT lg isn't supported:

maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', false]),

mbrookes on 13 Jul 2018

👍1

Is there a reason for excluding 'lg'? There's a pretty big jump between 'md' and just disabling maxWidth altogether.

I'm curious if it was a conscious design decision or it just wasn't needed at the time.