Meningkatkan ukuran modal untuk Bootstrap Twitter

Saya mencoba mengubah ukuran bentuk modal atau lebih tepatnya - minta ia merespons konten yang saya render di sana. Saya menggunakannya untuk membuat formulir dan lebih suka berurusan dengan pengguliran jika diperlukan sendiri.

Bentuk yang saya render mungkin membutuhkan 50px lain - hanya kehilangan tombol.

Jadi saya telah mencoba mengganti gaya .modal dalam file application.css.scss saya (Menggunakan Rails 3.2) tetapi deklerasi max-height dan overflow tampaknya ditimpa.

Adakah pikiran?

Saya mengalami masalah yang sama persis, Anda dapat mencoba:

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

Jika Anda melihat bilah gulir hanya muncul di bagian tubuh dari dialog modal, ini berarti bahwa ketinggian maksimum tubuh hanya perlu disesuaikan.

di Bootstrap 3:

.modal-dialog{
  width:whatever
}

Anda perlu memastikan bahwa ini ada di elemen #myModal .modal-body bukan hanya #myModal (Terlihat beberapa orang melakukan kesalahan ini) dan Anda mungkin juga ingin mengakomodasi perubahan ketinggian dengan mengubah margin modals.

Menggunakan pengukuran 'vh' (atau 'vw' untuk lebar) CSS3 baru (yang menetapkan ketinggian sebagai sebagian kecil dari port tampilan) gunakan:

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

Dengan cara ini, jika Anda menggunakan kerangka kerja responsif, seperti Bootstrap, maka Anda dapat menyimpan desain itu di modals Anda juga.

Menggabungkan dua metode untuk lebar dan tinggi dan Anda memiliki retasan yang bagus:

CSS:

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

JQuery:

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

Yang ini yang saya gunakan. Ini memperbaiki masalah margin dan scrollbar untuk lebar dan tinggi tetapi tidak mengubah ukuran modal agar sesuai dengan kontennya.

Semoga saya bisa membantu!

Menggunakan kelas CSS (Anda juga dapat mengganti gaya - tidak disarankan):

(html)

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

(css)

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

Saya mendapat jawabannya ... masalahnya adalah Anda telah menimpa atribut max-height juga untuk modal bootstrap dapat diubah ukurannya melebihi batas ketinggian 500px

Bootstrap Model besar

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

Bootstrap Model kecil

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

Cukup atur tinggi ".modal-body": 100% itu akan secara otomatis menyesuaikan ketinggian sesuai konten Anda dan memasukkan "max-height" sesuai layar Anda ...

Sudahkah Anda mencoba parameter ukuran:

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

Ukuran opsional

Modals memiliki dua ukuran opsional, tersedia melalui kelas modifier untuk ditempatkan pada dialog -modal.

1. default: 600px
2. sm: kecil, lebar 300px
3. lg: besar, lebar 900px

Jika Anda menginginkan sesuatu yang berbeda, perbarui 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;
  }
}

Untuk Boostrap> 4 ini berhasil untuk saya:

.modal-content{
  width: 1200px;
}

versi yang lebih maju:

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

di sini adalah codepen:

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

Dengan asumsi bahwa modal Anda memiliki id modal1CSS berikut ini akan meningkatkan ketinggian modal dan menampilkan setiap luapan.

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

Mencoba beberapa hal di atas karena perlu mengatur ukuran lebar dan tinggi tertentu (untuk menampilkan gambar dalam modal) dan karena tidak ada yang membantu saya, saya memutuskan untuk mengganti gaya dan telah menambahkan yang berikut ke <div> utama yang memiliki class = "modal hide fade in" di dalamnya: yaitu menambahkan lebar ke tag gaya untuk latar belakang modal.

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

dan kemudian menambahkan tag 'style' berikut ke modal-body:

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

bekerja seperti pesona sekarang, saya menampilkan gambar dan sekarang sangat cocok.

Ini bekerja untuk saya:

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

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

Perhatikan bahwa dalam kasus saya, saya memiliki bersarang modals, masing-masing memiliki kontrol yang memerlukan ketinggian berbeda ketika saya beralih tampilan kontrol di dalam modal bersarang , jadi saya tidak bisa menerapkan max-height , sebagai gantinya tinggi: 100% bekerja untuk saya dengan baik.

Jangan lupa kelas bootstrap opsional modal-lgdan modal-smjika Anda ingin tetap berada dalam kerangka kerja responsif. Dan tambahkan clearfix di bawah formulir Anda, yang dapat membantu tergantung pada struktur Anda.

Saya baru-baru ini mencoba ini dan mendapatkan ini benar: Semoga ini bisa membantu

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

Ini akan menyesuaikan ketinggian model Anda.

Berikut ini adalah metode sederhana lain untuk meningkatkan ukuran modal bootstrap:

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

Lebar modal dapat ditentukan dalam persentase layar. Dalam contoh di atas saya telah mengaturnya ke 80% dari lebar layar saya.

Di bawah ini adalah contoh kerja yang sama:

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