Aumentar el tamaño modal para Twitter Bootstrap

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

El formulario que renderizo probablemente necesite otros 50 px, solo faltan los botones.

Así que he intentado anular los estilos .modal en mi archivo application.css.scss (usando Rails 3.2) pero las declinaciones de altura máxima y desbordamiento parecen estar sobrescritas.

¿Alguna idea?

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 diálogo modal, esto significa que la altura máxima de solo el cuerpo debe ajustarse.

en Bootstrap 3:

.modal-dialog{
  width:whatever
}

Debe asegurarse de que esté en el elemento #myModal .modal-body no solo #myModal (visto que algunas personas cometen este error) y también puede querer adaptarse al cambio de altura cambiando los márgenes de los modales.

Usando la nueva medición CSS3 'vh' (o 'vw' para el 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 manera, si está utilizando un marco receptivo, como Bootstrap, también puede mantener ese diseño en sus modales.

Mezcla 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. Soluciona los problemas de margen y las barras de desplazamiento para ancho y alto, pero no cambiará el tamaño del modal para que se ajuste a su contenido.

Espero haber sido de ayuda!

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

(html)

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

(css)

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

Obtuve la respuesta ... la cuestión es que usted ha sobrescrito el atributo de altura máxima, así que el modo de arranque se puede cambiar de tamaño más allá del límite de altura de 500 píxeles

Bootstrap modelo grande

<div class="modal-dialog modal-lg">

Bootstrap Modelo pequeño

<div class="modal-dialog modal-sm">

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

¿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 modificadoras que se colocarán en un diálogo .modal.

1. predeterminado: 600 px
2. sm: pequeño, ancho de 300px
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;
  }
}

Para Boostrap> 4 esto funcionó para mí:

.modal-content{
  width: 1200px;
}

Una versión más avanzada:

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

Aquí hay un codepen:

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

Asumir que su modal tiene una identificación del modal1siguiente CSS aumentaría la altura del modal y mostraría cualquier desbordamiento.

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

Intenté algunos de los anteriores ya que es necesario establecer tamaños específicos de ancho y alto (para mostrar una imagen en un modal) y como ninguno de los anteriores me ayudó, decidí anular los estilos y he agregado lo siguiente al <div> principal que tiene class = "modal hide fade in": es decir, se 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 perfectamente.

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 diferentes alturas cuando alterno la visualización del control dentro del modo anidado , por lo que no pude aplicar la altura máxima , sino la altura: 100% me funciona bien.

No olvide las clases opcionales de bootstrap modal-lgy modal-smsi desea mantenerse dentro del marco receptivo. Y agregue un clearfix debajo de su formulario, que puede ayudar a depender de su estructura.

Intenté esto recientemente y acerté: espero que esto sea útil

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

Esto ajustará la altura de su modelo.

Aquí hay otro método simple para aumentar el tamaño del modal de arranque:

$(".modal-dialog").css("width", "80%");

El ancho del modal se puede especificar en términos de porcentaje de la pantalla. En el ejemplo anterior, lo configuré al 80% del ancho de mi pantalla.

A continuación se muestra un ejemplo de trabajo de lo mismo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>