Aumentar o tamanho modal do Twitter Bootstrap

Estou tentando alterar o tamanho do formulário modal ou melhor - ele responde ao conteúdo que renderizo lá. Estou usando-o para renderizar um formulário e preferiria lidar com a rolagem, se necessário.

O formulário que eu renderize provavelmente precisa de mais 50 pixels - faltando apenas os botões.

Portanto, tentei substituir os estilos .modal no meu arquivo application.css.scss (usando o Rails 3.2), mas as declerações de altura máxima e de estouro de excesso parecem ser substituídas.

Alguma ideia?

Eu estava tendo exatamente o mesmo problema, você pode tentar:

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

Se você perceber que as barras de rolagem aparecem apenas na seção do corpo da caixa de diálogo modal, isso significa que a altura máxima somente do corpo precisa ser ajustada.

no Bootstrap 3:

.modal-dialog{
  width:whatever
}

Você precisa ter certeza de que ele está no elemento #myModal .modal-body e não apenas no #myModal (algumas pessoas cometem esse erro) e também pode querer acomodar a alteração de altura alterando as margens do modal.

Usando a nova medição CSS3 'vh' (ou 'vw' para largura) (que define a altura como uma fração da porta de visualização), use:

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

Dessa forma, se você estiver usando uma estrutura responsiva, como o Bootstrap, também poderá manter esse design em seus modais.

Misturando dois métodos para largura e altura e você tem um bom truque:

CSS:

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

JQuery:

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

Este é o que eu uso. Ele corrige os problemas de margem e barras de rolagem para largura e altura, mas não redimensiona o modal para caber em seu conteúdo.

Espero ter ajudado!

Usando uma classe CSS (você também pode substituir o estilo - não sugerido):

(html)

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

(css)

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

Eu recebi a resposta ... o problema é que você substituiu o atributo max-height, assim como o modal de auto-inicialização pode ser redimensionado além do limite de altura de 500px

Modelo grande de inicialização

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

Bootstrap Small model

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

Basta definir a altura ".modal-body": 100% ajustará automaticamente a altura conforme o seu conteúdo e colocará "max-height" conforme a sua tela ...

Você já tentou o parâmetro size:

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

Tamanhos opcionais

Os modais têm dois tamanhos opcionais, disponíveis através de classes modificadoras para serem colocados em uma caixa de diálogo .modal.

1. padrão: 600px
2. sm: pequeno, largura de 300 px
3. lg: grande, largura de 900 px

Se você quiser algo diferente, atualize o arquivo 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, isso funcionou para mim:

.modal-content{
  width: 1200px;
}

uma versão mais avançada:

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

aqui está um codepen:

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

Supondo que seu modal tenha um ID do modal1seguinte CSS aumentaria a altura do modal e exibia qualquer estouro.

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

Tentei algumas das opções acima, conforme a necessidade de definir tamanhos específicos de largura e altura (para exibir uma imagem em um modal) e, como nenhuma delas acima me ajudou, decidi substituir os estilos e adicionei o seguinte ao principal <div> que tem class = "ocultar modal desvanece-se": ou seja, adicionou uma largura à tag de estilo para o plano de fundo do modal.

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

e, em seguida, adicionamos as seguintes tags 'style' ao corpo modal:

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

funciona como um encanto agora, estou exibindo uma imagem e agora ela se encaixa perfeitamente.

Isso funcionou para mim:

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

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

Observe que, no meu caso, eu tenho modais aninhados, cada um com controles que exigem alturas diferentes quando alterno a exibição do controle dentro do modal aninhado , então não pude aplicar a altura máxima , em vez da altura: 100% funciona bem para mim.

Não se esqueça das classes opcionais de inicialização modal-lge modal-smse você deseja manter a estrutura responsiva. E adicione um clearfix abaixo do formulário, que pode ajudar dependendo da sua estrutura.

Recentemente, eu estava tentando isso e entendi direito: Espero que isso seja útil

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

Isso ajustará a altura do seu modelo.

Aqui está outro método simples para aumentar o tamanho do modal de inicialização:

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

A largura do modal pode ser especificada em termos de porcentagem da tela. No exemplo acima, eu o configurei para 80% da largura da minha tela.

Abaixo está um exemplo de trabalho do mesmo:

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