How to make a modal fullscreen?

Question

I am trying to make a bootstrap vue modal fullscreen. Which css classes should I override, I want to do this in a scoped style in the component that will use this modal.

I have tried overriding the classes by using emmanuels answer https://github.com/bootstrap-vue/bootstrap-vue/issues/1730, I have tried globally overriding the modal-body, modal-content, modal-dialog class and giving them 100% width and height (the height worked but the width wasn't working and I couldn't figure out why) — ConfusedCoder, Mar 25 '19 at 20:05
The width needs to be overridden using `max-width: 100%`. There is an additional media query that has the dialog set to 500px. — brooksrelyt, Mar 25 '19 at 20:09

brooksrelyt · Accepted Answer · 2019-03-25T20:23:31.177

15

You want to edit .modal-dialog and force the dimensions.

Example CSS:

.modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
}

Additionally to get this working in vue. You can try adding a class to b-modal and trying something like this:

<div>
  <b-button v-b-modal.modal1>Launch demo modal</b-button>

  <!-- Modal Component -->
  <b-modal class="test-modal" id="modal1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

CSS:

.test-modal .modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    position: fixed;
    z-index: 100000;
}

edited Mar 25 '19 at 20:23

answered Mar 25 '19 at 20:07

brooksrelyt

3,925
5
31
54

This works globally but I only want to change this modal, how can I access .modal-dialog if i assign a class to b-modal? – ConfusedCoder Mar 25 '19 at 20:16
Just to mention if anyone else will face same issue. Currently u need to assign class via "modal-class" attribute on b-modal not "class". – Gazeciarz Dec 10 '21 at 09:06
Nice, but is there a way to add a scroll bar on both the X and Y-axis for the contents? Because as of now if there is more data then they are not visible at all. – BATMAN_2008 Apr 12 '22 at 09:47
@BATMAN_2008 You can take a look at the overflow property for css: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow There are examples for x and y axis – brooksrelyt Apr 18 '22 at 13:48
And you may also need add `/deep/` for stylesheet.At least, this work for me now. – jizhihaoSAMA Apr 26 '22 at 17:06

score 6 · Answer 2 · answered Jul 27 '20 at 20:26

6

Expanding on the accepted answer, to apply this locally by applying a class to the outer modal div, you need to use the the modal-class property on the component rather than giving it a class like you would normally.

https://bootstrap-vue.org/docs/components/modal#variants

JS:

<b-modal modal-class="modal-fullscreen">
    ...
</b-modal>

CSS:

.modal-fullscreen .modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    position: fixed;
    z-index: 100000;
}

answered Jul 27 '20 at 20:26

dav0r

113
2
4

Nice, but is there a way to add a scroll bar on both the X and Y-axis for the contents? Because as of now if there is more data then they are not visible at all. – BATMAN_2008 Apr 12 '22 at 09:46
@BATMAN_2008 Did you mean ["scrollable"](https://bootstrap-vue.org/docs/components/modal#scrolling-long-content)? – jizhihaoSAMA Apr 26 '22 at 16:55

score -1 · Answer 3 · edited Nov 07 '20 at 16:02

-1

If you don't want to alter the CSS, you can just add .modal-xl next to .modal-dialog.

For example:

<div class="modal-dialog modal-xl" role="document">

edited Nov 07 '20 at 16:02

Scott

4,974
6
35
62

answered Nov 05 '20 at 22:36

olegb

19
2

How to make a modal fullscreen?

3 Answers3