I'm using react-modal, and I cannot find any way to successfully set the position of the Modal. I'm using inline styles per examples online, but they have no effect. I'm doing exactly what I see working in the codepen example on the react-modal site, but it doesn't work in my app. Something is obviously different, but I cannot see what it is.

This is how I'm rendering the Modal:

render: function() {
    return (
      <Modal
        bsSize={this.props.size}
        aria-labelledby="contained-modal-title-lg"
        show={this.props.show}
        style={{ content : {top: '70%'}}}
        onHide={this.hideModal}>
        <Modal.Header>
          <Modal.Title id="contained-modal-title-lg">{this.props.modalTitle}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.props.modalBody || this.modalBody}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.hideModal}>Cancel</Button>
          <Button bsStyle="primary" onClick={this.props.modalCallback}>{this.props.confirmButtonText}</Button>
        </Modal.Footer>
      </Modal>
    );

I've tried many different values for the style property, but anything I set has no effect. I also tried without the bsSize property, and that didn't work either. I just need the top border of the content to be somewhat lower, because it is opened on top of another modal in the same position, and I want it to be visually apparent that there are two modals open on the page. I'm using react-modal 3.3.1.

I'm using react-modal, and I cannot find any way to successfully set the position of the Modal. I'm using inline styles per examples online, but they have no effect. I'm doing exactly what I see working in the codepen example on the react-modal site, but it doesn't work in my app. Something is obviously different, but I cannot see what it is.

This is how I'm rendering the Modal:

render: function() {
    return (
      <Modal
        bsSize={this.props.size}
        aria-labelledby="contained-modal-title-lg"
        show={this.props.show}
        style={{ content : {top: '70%'}}}
        onHide={this.hideModal}>
        <Modal.Header>
          <Modal.Title id="contained-modal-title-lg">{this.props.modalTitle}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.props.modalBody || this.modalBody}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.hideModal}>Cancel</Button>
          <Button bsStyle="primary" onClick={this.props.modalCallback}>{this.props.confirmButtonText}</Button>
        </Modal.Footer>
      </Modal>
    );

I've tried many different values for the style property, but anything I set has no effect. I also tried without the bsSize property, and that didn't work either. I just need the top border of the content to be somewhat lower, because it is opened on top of another modal in the same position, and I want it to be visually apparent that there are two modals open on the page. I'm using react-modal 3.3.1.

• javascript
• reactjs
• react-modal

Share Improve this question Follow edited Mar 30, 2018 at 16:34 MidnightJava asked Mar 30, 2018 at 4:58 MidnightJavaMidnightJava 1,99722 gold badges1919 silver badges3838 bronze badges 2

• 1 Try style={{ top: '70%'}} once and check – Help Commented Mar 30, 2018 at 5:13
• That worked. Thank you. But I'm also trying to set the width, and that has different results. I want to get a size between bsSize="large" and not specifying bsSize. So I set bsSize="large" and specify the style as style={{top: '20%', width: '80%'}}. The top is offset as I expect, but instead of reducing width to 80%, it shifts it 20% to the left, without changing the width. Setting width to 120% shifts it 20% to the right. Setting left and right doesn't work either. – MidnightJava Commented Mar 30, 2018 at 12:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Thanks to help provided on this GitHub issue post, I got it to work as follows:

<Modal dialogClassName='custom-dialog'...>

CSS:

.custom-dialog {width:48% !important; top:20%;}

The piece I was missing was the need to override the width setting with !important. The width is relative to the viewport width, so I found a value by trial and error that gave me the desired percentage of the underlying Modal's width.