Увеличить модальный размер для Twitter Bootstrap

Я пытаюсь изменить размер модальной формы, а точнее - заставить ее реагировать на содержимое, которое я там отображаю. Я использую его для рендеринга формы и предпочел бы иметь дело с прокруткой, если это необходимо самому.

Форма, которую я отображаю, вероятно, требует еще 50 пикселей - просто не хватает кнопок.

Поэтому я попытался переопределить стили .modal в моем файле application.css.scss (используя Rails 3.2), но значения max-height и overflow кажутся перезаписанными.

Есть предположения?

У меня была точно такая же проблема, вы можете попробовать:

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

Если вы заметили, что полосы прокрутки появляются только в разделе тела модального диалога, это означает, что необходимо отрегулировать максимальную высоту только тела.

в Bootstrap 3:

.modal-dialog{
  width:whatever
}

Вы должны убедиться, что он находится в элементе #myModal .modal-body, а не только в #myModal (видели, что несколько человек делают эту ошибку), и вы также можете учесть изменение высоты, изменив поля модальных полей.

Используя новое CSS3 «vh» (или «vw» для ширины) измерение (которое устанавливает высоту как часть порта представления), используйте:

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

Таким образом, если вы используете адаптивный фреймворк, такой как Bootstrap, вы можете сохранить этот дизайн и в своих модальных моделях.

Смешав два метода для ширины и высоты, вы получите хороший хак:

CSS:

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

JQuery:

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

Это тот, который я использую. Он исправляет поля и полосы прокрутки как для ширины, так и для высоты, но не меняет размер модального слоя в соответствии с его содержимым.

Надеюсь, я вам помог!

Используя класс CSS (вы также можете переопределить стиль - не рекомендуется):

(HTML)

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

(CSS)

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

Я получил ответ ... дело в том, что вы перезаписали атрибут max-height, а также, чтобы модальный бутстрап мог быть изменен за пределы высоты 500px

Bootstrap Большая модель

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

Bootstrap Маленькая модель

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

Просто установите высоту «.modal-body»: 100% он автоматически отрегулирует высоту в соответствии с вашим контентом и поставит «max-height» в соответствии с вашим экраном ...

Вы пробовали параметр размера:

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

Дополнительные размеры

Модалы имеют два необязательных размера, доступные через классы модификаторов для размещения в диалоге .modal.

1. по умолчанию: 600 пикселей
2. см: маленький, ширина 300 пикселей
3. LG: большой, ширина 900 пикселей

Если вы хотите что-то другое, обновите 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;
  }
}

Для Boostrap> 4 это сработало для меня:

.modal-content{
  width: 1200px;
}

более продвинутая версия:

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

Вот кодекс:

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

Предполагая, что ваш модальный имеет идентификатор modal1следующего CSS, увеличит высоту модального и отобразит любое переполнение.

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

Попробовал несколько из вышеперечисленного, так как необходимо установить конкретные размеры ширины и высоты (для отображения изображения в модальном режиме), и, поскольку ни одно из вышеперечисленных не помогло мне, я решил переопределить стили и добавил следующее к основному <div>, который имеет class = "modeal hide fade in" в нем: т.е. добавил ширину к тегу стиля для фона модального окна.

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

и затем добавил следующие теги 'style' к модальному телу:

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

теперь работает как шарм, я показываю изображение, и теперь оно идеально подходит.

Это сработало для меня:

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

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

Обратите внимание, что в моем случае у меня есть вложенные модалы, каждый из которых имеет элементы управления, которые требуют разной высоты, когда я переключаю отображение элемента управления во вложенном модале , поэтому я не мог применить максимальную высоту , вместо этого высота: 100% работает для меня хорошо.

Не забудьте о дополнительных классах начальной загрузки modal-lgи о modal-smтом, хотите ли вы оставаться в рамках адаптивной структуры. И добавьте под вашей формой исправление, которое может помочь в зависимости от вашей структуры.

Я недавно пробовал это и получил это правильно: надеюсь, это будет полезно

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

Это отрегулирует высоту вашей модели.

Вот еще один простой способ увеличить размер модуса начальной загрузки:

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

Ширина модальной зоны может быть указана в процентах от экрана. В приведенном выше примере я установил его на 80% ширины моего экрана.

Ниже приведен рабочий пример того же:

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