How to make a modal fullscreen?
18,604
Solution 1
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;
}
Solution 2
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;
}
Related videos on Youtube
Author by
ConfusedCoder
Updated on June 04, 2022Comments
-
ConfusedCoder almost 2 years
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.
-
Zim about 5 yearsWhat have you tried so far?
-
ConfusedCoder about 5 yearsI have tried overriding the classes by using emmanuels answer 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 about 5 yearsThis works globally but I only want to change this modal, how can I access .modal-dialog if i assign a class to b-modal?
-
Gazeciarz over 2 yearsJust to mention if anyone else will face same issue. Currently u need to assign class via "modal-class" attribute on b-modal not "class".