Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[modal] modal is hidden with scrollable content on IE11

See original GitHub issue

On IE11, modal written before scrollable element is hidden with the scrollable content. It is reproducible only with current dev branch.

Example

  <div id="app">
    <b-modal ref="modal1">modal-1</b-modal>
    <div style="height:100px;overflow-y:auto;">
      <div style="background-color:yellow;height:600px;">content</div>
    </div>
    <b-modal ref="modal2">modal-2</b-modal>
    <b-button @click="$refs.modal1.show()">show modal-1</b-button>
    <b-button @click="$refs.modal2.show()">show modal-2</b-button>
  </div>

‘modal-1’ is shown on click ‘show modal-1’ button, but is hidden with ‘content’. ‘modal-2’ is shown on click ‘show modal-2’ button, and is not hidden. bv-modal-issue-20181129

Environment

OS: Windows 10 (1803) Browser: IE11 (11.407.17134.0) Bootstrap-Vue: HEAD of dev branch (8b8272bad45585389989064aa11e1fd622237493)

It does not reproduce with Firefox (63.0.3), Edge (42.17134.1.0), Chrome (70.0.3538.110). It does not reproduce with Bootstrap-Vue 2.0.0-rc.11. It does not reproduce on playground of dev build.

Workaround

Writing all modals at the end of the content maybe avoid this issue.

Issue Analytics

State:
Created 5 years ago
Comments:27 (14 by maintainers)

Top GitHub Comments

1reaction

4dn-osscommented, Mar 11, 2019

bootstrap-vue v2.0.0-rc.14 & IE11(11.590.17134.0)

  <div id="app">
    <h1>2.0.0-rc.14</h1>
    <b-modal ref="modal1">modal-1</b-modal>
    <b-container>
      <b-row>
        <b-col>
          <b-modal ref="modal2">modal-2</b-modal>
          <div style="height:100px;overflow-y:auto;">
            <div style="background-color:yellow;height:600px;">
              content
            </div>
          </div>
          <b-modal ref="modal3">modal-3</b-modal>
        </b-col>
      </b-row>
    </b-container>
    <b-modal ref="modal4">modal-4</b-modal>
    <b-button @click="$refs.modal1.show()">show modal-1</b-button>
    <b-button @click="$refs.modal2.show()">show modal-2</b-button>
    <b-button @click="$refs.modal3.show()">show modal-3</b-button>
    <b-button @click="$refs.modal4.show()">show modal-4</b-button>
  </div>

modal-1, modal-2, modal-3, modal-4: fine This issue seems to be solved.

0reactions

tmorehousecommented, Mar 11, 2019

Excellent.

Top Results From Across the Web

Transform + positioning issue in IE 11 - Stack Overflow

I have a position:fixed div in a modal on which bootstrap applied the transform:translate rule. It works fine in FF and Chrome but...

div modal popup not rendered correctly on IE when screen is ...

I have a div modal popup that displays fine in Chrome but in IE 11 it ... overflow: auto /* Enable scroll if...

CTA Modal: How To Build A Web Component

A screenshot of the CTA Modal dialog displaying a scrollable piece of content. CTA Modal — scrollable content. (Large preview). Before We Even ......

Modal - Bootstrap

Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so...

Modals not working on IE11 - Material Design for Bootstrap

Then, the issue: I can't make modals working on IE11. ... aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div ...