Strange backdrop behaviour

[playpauseandstop]

I used rbm in my project as,

<Modal aria-labelledby="archive-modal-header"
       onHide={this.onHideArchiveModal}
       show={this.state.showArchiveModal}>
  <Modal.Header closeButton>
    <Modal.Title id="archive-modal-header">
      Are you sure?
    </Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <p>
      This operation cannot be undone. After archiving, project will
      disappear from UI, but you still be able to make Invoices from
      its Tracked Stories.
    </p>
    <p>
      <button className="btn btn-block btn-danger">
        OK! Archive {this.state.data.name} project
      </button>
    </p>
  </Modal.Body>
</Modal>

But when Modal opened, it visually displayed inside backdrop layer, not outside, so faded.

I fixed this by passing backdrop={false} to Modal component, but I'd like to know what I'm missed for proper backdrop behaviour.

ps. Let me know if you need more details.

[jquense]

it looks like you are probably using an older version of bootstrap where the styles were a bit different for modals, and by 'older' I mean not the most recent, there was a style issue in one of the 3.x minor versions that did this. So what you are seeing is actually a bootstrap bug vs a rbm bug, you can upgrade or just patch the css yourself for the modal (take a look at the include rbm complete css for the difference)

[playpauseandstop]

I've updated bootswatch Readable theme to,

/*!
 * bootswatch v3.3.4+1
 * Homepage: http://bootswatch.com
 * Copyright 2012-2015 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
 */

and include rbm-complete.css instead of rbm-patch.css, but still have same "faded" behaviour. Any other ideas?

[jquense]

without seeing the styles it's hard to say. in Chrome make sure none of the backdrop styles are being overridden by the theme, and the old ones aren't cached. I've tested it with the latest bootstrap and it's working here. Can you confirm that it works without the bootstrap theme included (just rbm-complete.css)

[playpauseandstop]

Yep, I can confirm that backdrop works properly without Bootswatch theme, when I used only rbm-complete.css. So this is a Bootswatch issue, will try to fix it later, but for now will use modals without backdrop.

Thanks for your help!

[SudoPlz]

Same problem here....... Any solutions yet?

[SudoPlz]

Till it gets fixed use bootstrap 3.3.1. It works with that version.. Current version 3.3.5 produces that error.