CODEWITHSUNDEEP
javascriptvue.jsbootstrap-4bootstrap-vue
Vladimir Gatev
Vladimir Gatev

Reputation: 411

When using b-overlay in b-modal the modal body is not visible

I am using Vue Bootstrap and when I add b-overlay with no-wrap prop in b-modal the modal body is not visible even if the overlay is not active. Please see the example

https://codesandbox.io/s/friendly-worker-evcyd

I can use it without no-wrap prop but this way the modal footer and header are not overlaid

Upvotes: 1

Views: 1767

Answers (2)

pmvp
pmvp

Reputation: 77

As mentioned here, you can add body-class="position-static" on b-modal and rounded prop enabled. This will make the entire b-modal covered with overlay.

Upvotes: 0

Hiws
Hiws

Reputation: 10334

That's because you're using the no-wrap property, which disabled the usage of the default slot in <b-overlay>.

You can read more here: https://bootstrap-vue.org/docs/components/overlay#non-wrapping-mode

By default, wraps the content of the default slot. In some cases you may want to obscure a parent container. Use the no-wrap prop to disable rendering of the wrapping (and ignore the default slot).

If you need to use no-wrap, you need to place the content you want outside of <b-overlay>.

<b-modal>
  <b-overlay no-wrap>
    <template #overlay>
      Overlay content here
    </template>
  </b-overlay>

  <div>Modal content</div>
</b-modal>

Upvotes: 1

Related Questions