'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>

enter image description here

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