'Remove horizontal bar from bootstrap-vue b-modal body
I'm trying to remove the horizontal scrollbar from my b-modal, but without success, I tried to use style="overflow-x: hidden" but the bar keeps appearing,
I used this modified "modal-fullscreen .modal-dialog" css because I need fullscreen window
here's my code:
<b-modal modal-class="modal-fullscreen" scrollable no-close-on-backdrop id="popCadProp" :hide-header="true" content-class="todolist-popup-teste" size="xl">
<div @click="$bvModal.hide('popCadProp')">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x close"
data-dismiss="modal"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</div>
<div class="compose-box" style="overflow-x: hidden">
<div class="compose-content" style="overflow-x: hidden">
<h5 class="">Criar Proposta</h5>
<b-overlay :show="show_wait" rounded="sm">
<div id="dvListaProdutos">
CONTENT MODAL...
CONTENT MODAL...
CONTENT MODAL...
CONTENT MODAL...
CONTENT MODAL...
CONTENT MODAL...
</div>
</b-overlay>
</div>
</div>
<template #modal-footer>
<b-button variant="default" data-dismiss="modal" @click="$bvModal.hide('popCadProp')"><i class="flaticon-cancel-12"></i> Cancelar</b-button>
<b-button variant="default" class="add-tsk" @click="GeraProposta()">Gravar</b-button>
</template>
</b-modal>
<style>
.modal-fullscreen .modal-dialog {
max-width: 100%;
/*margin: 5px 5px 5px 5px;*/
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
display: flex;
position: fixed;
z-index: 100000;
}
.todolist-popup-teste {
overflow-x: hidden;
}
</style>
Thanks!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

