Using bootstrap v4 for VueJS, I encountered a challenge with increasing the width of b-modal. Despite trying various solutions mentioned here, nothing seemed to work.
<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>
The need arises to increase the width to accommodate long values in the table, aiming for about 80-90% of the screen width.
Your expertise is highly valued and any assistance would be greatly appreciated!
P.S. Solution found! By applying changes to specific b-modals as follows:
I established the following global style:
@media (min-width: 992px) {
.modal .modal-huge {
max-width: 90% !important;
width: 90% !important;;
}
}
Subsequently, adding 'huge' into the size prop of b-modal enables custom sizing based on the defined CSS class name.