Збільшення модального розміру для Twitter Bootstrap

Я намагаюся змінити розмір модальної форми, а точніше - відповісти на вміст, який я там надаю. Я використовую його для надання форми, і я вважаю за краще займатися прокруткою, якщо цього вимагаю сам.

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

Тому я спробував переосмислити стилі .modal у моєму файлі application.css.scss (за допомогою Rails 3.2), але декларації про максимальну висоту та переповнення, здається, перезаписані.

Будь-які думки?

У мене була та сама проблема, ви можете спробувати:

.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 висоти

Велика модель завантажувача

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

Завантажувальна невелика модель

<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: великий, ширина 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;
  }
}

Для 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 = "модальне приховання зникає" в ньому: тобто додано ширину до тегу стилю для фону модалу.

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>