web-dev-qa-db-fra.com

Besoin d'augmenter la largeur b-modale. Vuejs.bootstrap

J'utilise bootstrap V4 pour Vuejs et j'ai besoin d'augmenter B-modal. J'ai essayé différentes manières mentionnées ici: https://github.com/bootstrap-vue/bootstrap-vue/bootstrap-vue/Problèmes/632 Mais rien n'a de l'aide. En général, mon code ressemble à:

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

Je dois augmenter la largeur jusqu'à 80-90% de l'écran car certaines valeurs à l'intérieur de la table sont longues.

J'espère votre aide. Je crois que tu es gourous.

P.s. La réponse a été trouvée. Pour appliquer des modifications pour certains modaux B, vous pouvez suivre la prochaine étape:

J'ai créé globalement:

@media (min-width: 992px) { 
   .modal .modal-huge { 
      max-width: 90% !important;
      width: 90% !important;;
    }
 }

et après cela, j'ai placé "énorme" dans la taille de la taille de B-modal. "Énorme" est utilisé parce que la classe se termine par "énorme" mot.

htmlcssvue.jsbootstrap-4bootstrap-modal
5
Yuriy Korovko

Après avoir débogué le CSS, j'ai constaté que vous pouviez ajouter les règles CSS suivantes afin de remplacer les éléments existants et de rendre la largeur plus grande:

@media (min-width: 992px)
 .modal-lg {
    max-width: auto !important;
   }

@media (min-width: 576px)
  .modal-dialog {
    max-width: auto !important;

  }
1
Boussadjra Brahim

Il n'est pas toujours pratique de faire de nouveaux éléments dans votre fichier CSS. Si vous voulez adapter quelque chose, vous devez toujours rechercher où j'ai encore défini la largeur, le style, ai-je déjà défini?.

Je trouve plus facile de l'inclure directement dans mon code. Pour B-Model, j'ai trouvé la solution suivante:

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

Cela fonctionne pour ma version Bootstrap v4.3.

8
ageans