que - Aumentar el tamaño modal para Twitter Bootstrap

modal bootstrap jquery

Question

Estoy intentando cambiar el tamaño de la forma modal o, mejor dicho, hacer que responda al contenido que presento allí. Lo estoy usando para representar un formulario y preferiría lidiar con el desplazamiento si es necesario.

El formulario que realizo probablemente necesite otro 50px; solo faltan los botones.

Así que probé sobreescribir los estilos .modal en mi archivo application.css.scss (Using Rails 3.2) pero parece que se sobreescriben las declinaciones de altura máxima y desbordamiento.

¿Alguna idea?

Answer 1

¿Has probado el parámetro de tamaño:

return $modal.open({
  backdrop: ''static'',     
  size: ''sm'',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

Tamaños opcionales

Los modales tienen dos tamaños opcionales, disponibles a través de clases de modificador para ser colocados en un .modal-diálogo.

1. predeterminado: 600px
2. sm: pequeño, ancho de 300 px
3. lg: grande, ancho de 900px

Si quieres algo diferente, actualiza bootstarp.css

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Answer 2

Debes asegurarte de que esté en el elemento #myModal .modal-body no solo en #myModal (visto que algunas personas cometen este error) y también te conviene acomodar el cambio de altura cambiando los márgenes modales.

Answer 3

Estaba teniendo exactamente el mismo problema, puedes probar:

.modal-body {
    max-height: 800px;
}

Si observa que las barras de desplazamiento aparecen solo en la sección del cuerpo del cuadro de diálogo modal, esto significa que la altura máxima de solo el cuerpo debe ajustarse.

Answer 4

Esto funcionó para mí:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

Tenga en cuenta que en mi caso, he anidado modales, cada uno con controles que requieren alturas diferentes cuando alterno la visualización del control dentro del modal anidado , por lo que no pude aplicar la altura máxima , en cambio la altura: 100% me funciona bien.

Answer 5

Hace poco intenté esto y entendí esto correctamente: espero que esto sea útil

 .modal .modal-body{
        height: 400px;
    }

Esto ajustará la altura de tu modelo.

Answer 6

Intenté algunos de los anteriores como la necesidad de establecer tamaños específicos de ancho y alto (para mostrar una imagen en un modal) y como ninguno me ayudó, decidí anular los estilos y agregué lo siguiente al <div> principal que tiene class = "modal fade in" en él: es decir, agregó un ancho a la etiqueta de estilo para el fondo del modal.

style="display: none; width:645px;"

y luego agregó las siguientes etiquetas de ''estilo'' al cuerpo modal:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

funciona como un encanto ahora, estoy mostrando una imagen y ahora encaja perfecto.

Answer 7

Mezclando dos métodos para ancho y alto y tienes un buen truco:

CSS:

#myModal .modal-body {max-height: 800px;}

JQuery:

$(''myModal'').modal(''toggle'').css({''width'': ''800px'',''margin-left'': function () {return -($(this).width() / 2);}})

Este es el que yo uso. Arregla los problemas de margen y barras de desplazamiento para ancho y alto, pero no cambiará el tamaño del modal para que se ajuste a su contenido.

Espero que haya sido de ayuda!

Answer 8

No olvides las clases de arranque opcionales modal-lg y modal-sm si deseas mantenerte dentro del marco receptivo. Y agregue un clearfix debajo de su formulario, que puede ayudar dependiendo de su estructura.

Answer 9

Obtuve la respuesta ... la cuestión es que también sobrescribió el atributo de altura máxima y el modo de carga inicial puede redimensionarse más allá del límite de altura de 500px

Answer 10

Simplemente ajuste la altura del ".modal-body": 100% ajustará automáticamente la altura según su contenido y ponga "max-height" según su pantalla ...

Answer 11

Suponiendo que su modal tenga un id de modal1 el siguiente CSS aumentaría la altura del modal y mostraría cualquier desbordamiento.

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

Answer 12

Usando la nueva medida CSS3 ''vh'' (o ''vw'' para ancho) (que establece la altura como una fracción del puerto de vista) use:

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

De esta forma, si está utilizando un marco receptivo, como Bootstrap, entonces puede mantener ese diseño en sus modales también.

Answer 13

Usar una clase de CSS (también puede anular el estilo, no sugerido):

(html)

<div class="modal-body custom-height-modal" >

(css)

.custom-height-modal {
  height: 400px;
}

Answer 14

en Bootstrap 3:

.modal-dialog{
  width:whatever
}