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

Question

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

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

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

Есть мысли?

Answer 1

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

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

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

Answer 2

в Bootstrap 3:

.modal-dialog{
  width:whatever
}

Answer 3

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

Answer 4

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

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

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

Answer 5

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

CSS:

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

JQuery:

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

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

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

Answer 6

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

(html)

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

(css)

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

Answer 7

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

Answer 8

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

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

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

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

Answer 9

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

.modal-content{
  width: 1200px;
}

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

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

вот кодовая ручка:

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

Answer 10

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

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

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

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

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

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