Zwiększ rozmiar modalny dla Twitter Bootstrap

Próbuję zmienić rozmiar formy modalnej, a raczej - pozwolić jej odpowiadać na treści, które tam renderuję. Używam go do renderowania formularza i wolałbym zająć się przewijaniem w razie potrzeby.

Formularz, który renderuję, prawdopodobnie potrzebuje kolejnych 50 pikseli - po prostu brakuje przycisków.

Próbowałem więc zastąpić style .modal w moim pliku application.css.scss (przy użyciu Railsów 3.2), ale dekleracje max-height i overflow wydają się być nadpisane.

jakieś pomysły?

Miałem dokładnie ten sam problem, możesz spróbować:

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

Jeśli zauważysz, że paski przewijania pojawiają się tylko w sekcji treści okna dialogowego modalnego, oznacza to, że należy dostosować maksymalną wysokość tylko ciała.

w Bootstrap 3:

.modal-dialog{
  width:whatever
}

Musisz upewnić się, że znajduje się on w elemencie #myModal .modal-body, a nie tylko #myModal (kilka osób popełnia ten błąd), a także możesz chcieć dostosować się do zmiany wysokości, zmieniając marginesy modalne.

Używając nowego pomiaru CSS3 'vh' (lub 'vw' dla szerokości) (który ustawia wysokość jako ułamek portu widoku) użyj:

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

W ten sposób, jeśli używasz responsywnego frameworka, takiego jak Bootstrap, możesz zachować ten projekt również w swoich modach.

Mieszając dwie metody szerokości i wysokości, masz niezłą sztuczkę:

CSS:

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

JQuery:

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

To jest ten, którego używam. Naprawia problemy z marginesami i paskami przewijania zarówno w zakresie szerokości, jak i wysokości, ale nie zmienia rozmiaru modalu, aby pasował do jego zawartości.

Mam nadzieję, że pomogłem!

Korzystanie z klasy CSS (możesz też nadpisać styl - niezalecane):

(html)

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

(css)

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

Mam odpowiedź ... chodzi o to, że nadpisałeś również atrybut max-height, aby modal bootstrap mógł zostać zmieniony poza limit wysokości 500px

Bootstrap Duży model

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

Mały model Bootstrap

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

Po prostu ustaw „.modal-body” wysokość: 100% automatycznie dostosuje wysokość do treści i umieści „max-height” zgodnie z Twoim ekranem ...

Czy wypróbowałeś parametr rozmiaru:

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

Opcjonalne rozmiary

Modały mają dwa opcjonalne rozmiary, dostępne za pośrednictwem klas modyfikatorów, które można umieścić w oknie dialogowym .modal.

1. domyślnie: 600px
2. sm: mały, szerokość 300px
3. lg: duży, szerokość 900px

Jeśli chcesz czegoś innego, zaktualizuj plik 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;
  }
}

Dla Boostrap> 4 to zadziałało dla mnie:

.modal-content{
  width: 1200px;
}

bardziej zaawansowana wersja:

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

tutaj jest kod:

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

Zakładając, że twój modal ma identyfikator modal1następującego CSS, zwiększyłby wysokość modalu i wyświetliłby wszelkie przepełnienia.

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

Wypróbowałem kilka z powyższych, aby ustawić określone rozmiary szerokości i wysokości (aby wyświetlić obraz w trybie modalnym) i ponieważ żadne z powyższych nie pomogło mi, zdecydowałem się zastąpić style i dodałem następujące elementy do głównego elementu <div>, który ma class = "modal hide fade in" w nim: tj. dodano szerokość do znacznika stylu dla tła modalu.

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

a następnie dodał następujące tagi „style” do treści modalnej:

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

teraz działa jak urok, wyświetlam obraz i teraz pasuje idealnie.

To zadziałało dla mnie:

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

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

Zauważ, że w moim przypadku mam zagnieżdżone modale, z których każdy ma kontrolki, które wymagają różnych wysokości, gdy przełączam wyświetlanie formantu wewnątrz zagnieżdżonego modalu , więc nie mogłem zastosować maksymalnej wysokości , zamiast tego wysokość: 100% działa dla mnie dobrze.

Nie zapomnij o opcjonalnych klasach ładowania początkowego modal-lgi modal-smjeśli chcesz zachować ramy responsywne. I dodaj poprawkę pod formularzem, która może pomóc w zależności od twojej struktury.

Niedawno próbowałem tego i uzyskałem poprawny wynik: mam nadzieję, że to będzie pomocne

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

To dostosuje wysokość twojego modelu.

Oto kolejna prosta metoda na zwiększenie rozmiaru modułu ładowania początkowego:

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

Szerokość modalu można określić jako procent ekranu. W powyższym przykładzie ustawiłem go na 80% szerokości mojego ekranu.

Poniżej znajduje się działający przykład tego samego:

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