Material-UI dialog overlay?

4
votes

I'm using the React-Redux Material-UI package: http://www.material-ui.com/#/components/dialog

I'm trying to add a grey overlay over the entire dialog component with a circular indicator after the user logs in.

Attempting to do this in the dialog body like so: 

return <div>
            <Dialog
                title="Login"
                actions={actions}
                modal={false}
                open={this.props.open}
                onRequestClose={this.handleClose}>

                <div className="loadingRoot">
                    TEST TEST TEST  TEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TEST
                </div>

                <div>
                    <TextField floatingLabelText='username' name='username' onChange={this.handleTextFieldChange} /><br />
                    <TextField floatingLabelText='password' name='password' onChange={this.handleTextFieldChange} />
                </div>
            </Dialog>
        </div>;

Leads to a dialog box like this:

enter image description here

Anyway to make this work so the 'loadingRoot' class will cover the entire dialog?

1
cssreactjstypescriptreact-reduxmaterial-ui

1 Answers

6
votes

The material-ui Dialog is rendered internally with a content container which has a position of relative (source). So you can change your loading container to be positioned based on this content container with position: absolute;. You also have to increase the z-index so your overlay will be on top.

Using css:

.loadingRoot {
  background-color: blue;
  position: absolute;
  z-index: 2000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Using inline styles:

<div style={{
  backgroundColor: 'blue',
  position: 'absolute',
  zIndex: 2000,
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
}>
  Content
</div>