Estoy tratando de definir un bootstrap modal que recibe una dinámica de ancho en relación a su contenido y si es necesario una barra de desplazamiento vertical.

La barra de desplazamiento vertical funciona, pero el ancho horizontal parece ser un ancho fijo. Podría usted por favor ayuda?

Modal:

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h4 class="modal-title">Dynamic Modal Title</h4></div>
      <div class="modal-body">Dynamic Modal Body</div>
      <div class="modal-footer">Dynamic Modal Footer</div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS:

.modal .modal-body { /* Vertical scrollbar if necessary */
    max-height: 480px;
    overflow-y: auto;
}

body .modal-dialog { /* Width */
    max-width: 100%;
}
InformationsquelleAutor njlqay | 2015-12-16

3 Comentarios

  1. 16

    inline-block elementos de obtener dinámico de anchura respecto a su contenido.

    body .modal-dialog { /* Width */
        max-width: 100%;
        width: auto !important;
        display: inline-block;
    }

    Nota: width: auto !important; es necesario sobrescribir bootstrap css.
    Finalmente, para colocarlo en medio de la ventanilla a display: flex; en el elemento primario

    .modal {
      z-index: -1;
      display: flex !important;
      justify-content: center;
      align-items: center;
    }
    
    .modal-open .modal {
       z-index: 1050;
    }
    • Es allí una manera de definir la alineación horizontal de otra manera, a continuación, con text-align? Todos mis cuadros de diálogo ya se han escrito y que no contienen información para alinear texto a la izquierda, que sería mucho trabajo para definir este.
    • Sí, usted puede agregar .modal-cuadro de diálogo .modal-content { text-align: left; } para volver por modal de contenido.
    • ¿Qué puede ser esto para el Bootstrap 4. Cómo haría usted el .modal.in{ text-align: center; } ?
    • Me gustaría utilizar flexbox
    • Este enfoque hace que la modalidad de salto de nuevo a la izquierda en la clandestinidad. Parece que sólo sabe cómo se desvanecen en la izquierda, no en el centro. 🙁
    • display: flex !importante; es el bloqueo de los eventos de clic
    • He actualizado la respuesta. Compruebe este violín: jsfiddle.net/z8kh3qgc/3
    • En realidad, la solución está en Vael Victus respuesta, sólo tiene que utilizar «text-aling: center»

  2. 5

    @tmg respuesta sólo funcionará para Bootstrap 3. Para el Bootstrap 4, utilice esto:

    .modal {
        text-align: center;
    }

    Junto a su sugerencia:

    .modal-dialog {
        text-align: left; /* you'll likely want this */
        max-width: 100%;
        width: auto !important;
        display: inline-block;
    }
  3. 0

    fit-content funcionado bien para mí sin tener efectos secundarios, como un fuera de lugar modal.

    .modal {
        padding: 1%;
    }
    .modal-lg {
        min-width: auto;
        max-width: fit-content;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here