Material-ui: [Dialog] overflow property cause issue with react-select control

Created on 14 Jul 2017  路  11Comments  路  Source: mui-org/material-ui

Versions

Material-UI: 1.0.0-alpha.19
React: 15.5.4
Browser: Chrome

In current implementation of Dialog component dialog content has next style MuiDialogContent-root-... and predefined style property overflow-y:auto

capture1

it cause issue when I use Select component from react-select

capture3
capture2

But without this property all work fine
capture4

Is it possible to fix it?

Dialog question

Most helpful comment

just adding to @michaell94 what worked for me. I had both a Dialog and DialogContent, so the following worked:

const styles = theme => ({ root: { overflow: 'visible' } });

<Dialog classes={{ paperScrollPaper: classes.root }}>

<DialogContent className={classes.root}>

image

image

All 11 comments

The overflow is here so we get a scrollbar when the content is too large. I think that it should be the default behavior. Regarding addressing that issue, here are some possible solutions that I would use:

  • Overrides the style of DialogContent to disable that scrolling handling
  • Do not use DialogContent and use something home made instead
  • Hope that react-select portal the suggestion list at some point (as we do on the master branch)

How about Menu? In my opinion it will have the same behavior. Does it mean that I cannot use any component that have modal portal inside DialogContent ?

The Menu is using the portal feature. No issue on that end.

I have a similar issue, but with the Paper inside the Dialog. It has this style applied:

overflowY: 'auto', // Fix IE11 issue, to remove at some point.

I was able to workaround by passing a className to PaperProps and duplicating the original styles and applying a overflow:visible to the new class. But it'd be nice if we could control the overflow with a prop too.

The same here, this solve a problem:
const styles = theme => ({ dialogPaper: { overflow: 'visible' } });

<Dialog PaperProps={{ className: classes.dialogPaper }}>

just adding to @michaell94 what worked for me. I had both a Dialog and DialogContent, so the following worked:

const styles = theme => ({ root: { overflow: 'visible' } });

<Dialog classes={{ paperScrollPaper: classes.root }}>

<DialogContent className={classes.root}>

image

image

not a good solution for dialogs with long forms

Thanks! Just adding to @nthgol . (I am on version 4.0.1) This worked for me but I had to remove

EDIT: also be sure to remove scroll={"body"} from Dialog component!

just adding to @michaell94 what worked for me. I had both a Dialog and DialogContent, so the following worked:

const styles = theme => ({ root: { overflow: 'visible' } });

<Dialog classes={{ paperScrollPaper: classes.root }}>

<DialogContent className={classes.root}>

image

image

That works! Thanks

Note that a better alternative to react-select is available at https://material-ui.com/components/autocomplete/.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

newoga picture newoga  路  3Comments

mb-copart picture mb-copart  路  3Comments

finaiized picture finaiized  路  3Comments

iamzhouyi picture iamzhouyi  路  3Comments

anthony-dandrea picture anthony-dandrea  路  3Comments