Need to increase b-modal width. VueJS.Bootsrap
Solution 1
After debugging the CSS i found that you could add the following CSS rules in order to overwrite the existing ones and make the width more larger :
@media (min-width: 992px)
.modal-lg {
max-width: auto !important;
}
@media (min-width: 576px)
.modal-dialog {
max-width: auto !important;
}
Solution 2
It isn't always practical to make new elements in your CSS file. If you want to adapt something, you always need to search where again have I defined the width, style, did I define it already, ...
I find it easier to include it directly in my code. For b-model, I found the following solution:
<div>
<b-modal size="xl" title="Very large model"></b-modal>
<b-modal size="lg" title="Large model"></b-modal>
<b-modal size="sm" title="Small model"></b-modal>
</div>
It works for my version Bootstrap v4.3.
Yuriy Korovko
Updated on June 17, 2022Comments
-
Yuriy Korovko about 2 years
I use bootstrap v4 for VueJS and I need to increase b-modal. I tried different ways mentioned here : https://github.com/bootstrap-vue/bootstrap-vue/issues/632 but nothing didn't help. In general my code looks like :
<b-modal :ref="fieldName" :id="fieldName" :title="msg" size="lg" modal-class="b-modal"> <div class="script_table_container" v-if="scripts.length > 0"> <b-table :items="scripts" per-page="10" :current-page="currentPage"> <template slot="propertySnippet" slot-scope="data"> <samp> {{data.value}} </samp> </template> </b-table> <b-pagination :total-rows="scripts.length" per-page="10" v-model="currentPage" hide-goto-end-buttons align="right"/> </div> <div slot="modal-footer"> <b-btn class="mr-sm-2 su-btn-link" @click="close">Close</b-btn> </div> </b-modal>
I need to increase width up to 80-90 % of the screen cause some values inside the table are long.
Hope for your help guys. I believe you're gurus.
P.S. The answer has been found . To apply changes for a certain b-modals you can follow the next step :
I created globally:
@media (min-width: 992px) { .modal .modal-huge { max-width: 90% !important; width: 90% !important;; } }
and after that I placed 'huge' into size prop of b-modal. "Huge" is used because the class ends with "huge" word.
-
Yuriy Korovko over 5 yearsThank you very much. It works but only if I can override that CSS globally. Is it possible to override it for local file ?
-
Yuriy Korovko over 5 yearsTo override locally I made the following - I created : @media (min-width: 992px) { .modal .modal-huge { max-width: 90% !important; width: 90% !important;; } } and after that I placed 'huge' into size prop. It works
-
Nemo almost 5 yearsThis is easier then style sheets.