Twitter Bootstrap için kalıcı boyutu artır

Ben kalıcı formun boyutunu değiştirmek için çalışıyorum ya da daha doğrusu - orada render içeriği cevap var. Bir form oluşturmak için kullanıyorum ve gerekirse kendimi kaydırma ile başa çıkmak istiyorum.

Oluşturduğum formun muhtemelen başka bir 50 piksele ihtiyacı var - sadece düğmeleri eksik.

Bu yüzden application.css.scss dosyamdaki (Rails 3.2'yi kullanarak) .modal stillerini geçersiz kılmayı denedim, ancak maksimum yükseklik ve taşma bildirimlerinin üzerine yazılmış gibi görünüyor.

Düşüncesi olan var mı?

Aynı sorunu yaşıyordum, deneyebilirsiniz:

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

Kaydırma çubuklarının yalnızca kalıcı iletişim kutusunun gövde bölümünde göründüğünü fark ederseniz, bu yalnızca gövdenin maksimum yüksekliğinin ayarlanması gerektiği anlamına gelir.

Bootstrap 3'te:

.modal-dialog{
  width:whatever
}

Sadece #myModal'da değil, #myModal .modal-body öğesinde olduğundan emin olmanız gerekir (Birkaç kişi bu hatayı görür) ve ayrıca modals kenar boşluklarını değiştirerek yükseklik değişikliği için uyum sağlamak isteyebilirsiniz.

Yeni CSS3 'vh' (veya genişlik için 'vw') ölçümünü (yüksekliği görünüm bağlantı noktasının bir bölümü olarak ayarlar) kullanın:

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

Bu şekilde, Bootstrap gibi duyarlı bir çerçeve kullanıyorsanız, bu tasarımı da modals'ınızda tutabilirsiniz.

Genişlik ve yükseklik için iki yöntemi karıştırmak ve iyi bir kesmek var:

CSS:

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

JQuery:

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

Bu benim kullandığım. Hem genişlik hem de yükseklik için kenar boşluğu ve kaydırma çubukları sorunlarını düzeltir, ancak modal'ı içeriğine sığacak şekilde yeniden boyutlandırmaz.

Umarım yardımcı oldum!

Bir CSS sınıfı kullanma (stili geçersiz kılabilirsiniz - önerilmez):

(HTML)

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

(CSS)

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

Cevabı aldım ... şey, bootstrap modunun 500 piksel yükseklik sınırının ötesinde yeniden boyutlandırılabileceği maksimum yükseklik özelliğinin üzerine yazmış olmanızdır.

Bootstrap Büyük model

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

Bootstrap Küçük model

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

Sadece ".modal-body" yüksekliğini ayarlayın:% 100, yüksekliği içeriğinize göre otomatik olarak ayarlayacak ve ekranınıza göre "maksimum yükseklik" koyacaktır ...

Size parametresini denediniz mi:

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

İsteğe bağlı boyutlar

Yardımcı modeller, .modal iletişim kutusuna yerleştirilecek değiştirici sınıfları aracılığıyla kullanılabilen iki isteğe bağlı boyuta sahiptir.

1. varsayılan: 600 piksel
2. sm: küçük, 300 piksel genişlik
3. lg: büyük, 900 piksel genişlik

Farklı bir şey istiyorsanız, bootstarp.css dosyasını güncelleyin

@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 için bu benim için çalıştı:

.modal-content{
  width: 1200px;
}

daha gelişmiş bir sürüm:

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

İşte bir kodlama:

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

Modalınızın modal1aşağıdaki CSS'ye sahip olduğunu varsaymak, modalın yüksekliğini artıracak ve taşma gösterecektir.

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

Yukarıdakilerden birkaçını, belirli bir genişlik ve yükseklik boyutlarını (moddaki bir görüntüyü görüntülemek için) ayarlama gereği olarak denedim ve yukarıdaki hiçbiri bana yardımcı olmadığından, stilleri geçersiz kılmaya karar verdim ve aşağıdakileri ana <div> 'a ekledim. class = "modal hide fade in" içindeki: yani, modalın arka planı için stil etiketine bir genişlik ekledi.

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

ve daha sonra modal gövdeye aşağıdaki 'stil' etiketlerini ekledik:

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

şimdi bir cazibe gibi çalışıyor, bir görüntü gösteriyorum ve şimdi mükemmel uyuyor.

Bu benim için çalıştı:

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

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

Benim durumumda, iç içe modallarım var, her birinin iç içe kipte kontrolün ekranını değiştirdiğimde farklı yükseklik gerektiren kontrollere sahipim , bu yüzden maksimum yüksekliği uygulayamadım , bunun yerine yükseklik:% 100 benim için iyi çalışıyor.

İsteğe bağlı bootstrap sınıflarını modal-lgve modal-smduyarlı çerçevede tutmak istiyorsanız unutmayın . Ve formunuzun altına, yapınıza bağlı olarak yardımcı olabilecek bir düzeltme ekleyin.

Son zamanlarda bunu deniyordum ve bunu doğru anladım: Umarım bu yardımcı olacaktır

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

Bu, modelinizin yüksekliğini ayarlayacaktır.

İşte bootstrap modalının boyutunu artırmak için başka bir basit yöntem:

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

Kipin genişliği ekranın yüzdesi cinsinden belirtilebilir. Yukarıdaki örnekte ekran genişliğimin% 80'ine ayarladım.

Aşağıda bunun çalışan bir örneği verilmiştir:

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