Material-ui: [Dialog] component does not let me set width and extends beyond viewport

[hackingbeauty]

Hello.

I'm using the Dialog component and cannot set a width via CSS.

Also, the autoScrollBodyContent attribute does not work. I cannot scroll the height of the Dialog component when autoScrollBodyContent is set to true.

What am I doing wrong?

<Dialog id="app--dialog" ref="dialog" autoScrollBodyContent={true}>
</Dialog>

[jkruder]

@hackingbeauty What content are you putting inside the Dialog? The docs uses:

<Dialog title="Dialog With Scrollable Content" actions={customActions}
  autoDetectWindowHeight={true} autoScrollBodyContent={true}>
    <div style={{height: '2000px'}}>Really long content</div>
</Dialog>

Note the <div> inside the Dialog has a large height.

[jkruder]

@hackingbeauty To set the width of a dialog, use the contentStyle prop:

<Dialog
  title="Title"
  actions={scrollableCustomActions}
  contentStyle={{width: 100}}>
    ...
 </Dialog>

[hackingbeauty]

@jkruder, contentStyle doesn't work. For instance, when I try to specify a hard-coded pixel width, but the width of the dialog box ends up getting smaller:

<Dialog
  title="Title"
  actions={scrollableCustomActions}
  contentStyle={{width: 100}}>
    ...
 </Dialog>

Also, I don't want to specify inline styles. I want my styles specified in external style-sheets.

How can I get this to work?

[jkruder]

@hackingbeauty You should be able to use contentClassName https://github.com/callemall/material-ui/blob/master/src/dialog.jsx. The inline styling worked for me on 0.10.1 of MUI in chrome. I can also adjust the width property with other browsers' dev tools and the new width takes affect.

[hackingbeauty]

Hey @jkruder, autoScrollBodyContent does not work. I placed a div inside the Dialog component with a height of 2000px. When autoScrollBodyContent is set to true, there is no scrollbar.

I'm using [email protected]

I don't know what else to do. Here is my code:

      <Dialog 
        contentClassName="app-search-results-dialog" 
        ref="dialog" 
        title={searchTerm}  
        autoScrollBodyContent={true}>
         <div style={{height: '2000px'}}>Really long content</div>
        <RaisedButton ref="close-button" float="right" label="Close" secondary={true} onTouchTap={this.onTouchTap}/>
      </Dialog>

[jkruder]

@hackingbeauty Sorry about the delay in getting back to you. Can you try adding the autoDetectWindowHeight={true} property? That's the only difference between what you have and what works in the docs. If that works then we may have a bug.

[hackingbeauty]

@jkruder, I tried that. There is still no scrollbar when the height of the dialog is very large.

[hackingbeauty]

@jkruder, whenever I display the Dialog component I receive the following error:

TypeError: Cannot read property 'offsetHeight' of null (index.js:44454)

It appears as if the error is occurring on this line of index.js:

if (this.props.actions) maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight;

How can I fix this?

[jkruder]

@hackingbeauty This seems to be related to #1179. I took a quick look at the unresolved PRs but did not see a fix for it. Looks like all that needs to happen is change this.props.actions to this.props.actions.length. I would try modifying the source to check the length and if that works can you submit a PR to fix it?

[mariusk]

I second this. The suggested change needs to go in asap; this bug breaks all sites using scrollable bodies in dialogs (at least the ones having error checking..).

[mariusk]

Submitted PR https://github.com/callemall/material-ui/pull/1452

[aweary]

Has this issue been fixed?

[hackingbeauty]

Yes it has.

On Fri, Oct 16, 2015 at 2:18 PM, Brandon Dail [email protected]
wrote:

Has this issue been fixed?

—
Reply to this email directly or view it on GitHub
https://github.com/callemall/material-ui/issues/1144#issuecomment-148839110
.

Mark M. Muskardin
Front End Engineer & Web Developer
www.hackingbeauty.com
www.linkedin.com/in/markmuskardin