Tăng kích thước phương thức cho Twitter Bootstrap

Tôi đang cố gắng thay đổi kích thước của hình thức phương thức hay đúng hơn - để nó đáp ứng với nội dung tôi kết xuất ở đó. Tôi đang sử dụng nó để hiển thị một biểu mẫu và muốn xử lý việc cuộn nếu cần.

Biểu mẫu tôi kết xuất có thể cần thêm 50px - chỉ thiếu các nút.

Vì vậy, tôi đã thử ghi đè các kiểu .modal trong tệp application.css.scss của mình (Sử dụng Rails 3.2) nhưng các bộ giải mã chiều cao tối đa và tràn có vẻ bị ghi đè.

Có suy nghĩ gì không?

Tôi đã có cùng một vấn đề, bạn có thể thử:

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

Nếu bạn nhận thấy các thanh cuộn chỉ xuất hiện trên phần thân của hộp thoại phương thức, điều này có nghĩa là chiều cao tối đa của thân chỉ cần được điều chỉnh.

trong Bootstrap 3:

.modal-dialog{
  width:whatever
}

Bạn cần đảm bảo rằng nó nằm trong phần tử #myModal .modal-body chứ không chỉ #myModal (Đã thấy một vài người mắc lỗi này) và bạn cũng có thể muốn thay đổi chiều cao bằng cách thay đổi lề của phương thức.

Sử dụng phép đo CSS3 'vh' (hoặc 'vw' cho chiều rộng) mới (đặt chiều cao dưới dạng một phần của cổng xem) sử dụng:

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

Bằng cách này, nếu bạn đang sử dụng một khung phản hồi, như Bootstrap, thì bạn cũng có thể giữ thiết kế đó trong các chế độ của mình.

Kết hợp hai phương pháp cho chiều rộng và chiều cao và bạn có một bản hack tốt:

CSS:

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

JQuery:

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

Cái này là cái tôi dùng Nó sửa các vấn đề lề và thanh cuộn cho cả chiều rộng và chiều cao nhưng nó sẽ không thay đổi kích thước phương thức cho phù hợp với nội dung của nó.

Hy vọng tôi đã được giúp đỡ!

Sử dụng lớp CSS (bạn cũng có thể ghi đè kiểu - không được đề xuất):

(html)

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

(css)

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

Tôi đã có câu trả lời ... có một điều là bạn đã ghi đè lên thuộc tính chiều cao tối đa cũng như phương thức bootstrap có thể được thay đổi kích thước vượt quá giới hạn chiều cao 500px

Bootstrap mô hình lớn

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

Bootstrap mô hình nhỏ

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

Chỉ cần đặt chiều cao ".modal-body": 100% nó sẽ tự động điều chỉnh chiều cao theo nội dung của bạn và đặt "chiều cao tối đa" theo màn hình của bạn ...

Bạn đã thử tham số kích thước:

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

Kích thước tùy chọn

Các phương thức có hai kích thước tùy chọn, có sẵn thông qua các lớp sửa đổi được đặt trên hộp thoại .modal.

1. mặc định: 600px
2. sm: nhỏ, chiều rộng 300px
3. lg: lớn, chiều rộng 900px

Nếu bạn muốn một cái gì đó khác biệt, hãy cập nhật 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;
  }
}

Đối với Boostrap> 4 điều này làm việc cho tôi:

.modal-content{
  width: 1200px;
}

phiên bản cao cấp hơn:

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

đây là một mật mã:

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

Giả sử rằng phương thức của bạn có id của modal1CSS sau sẽ tăng chiều cao của phương thức và hiển thị bất kỳ tràn nào.

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

Đã thử một vài trong số những điều trên là cần thiết phải đặt kích thước cụ thể về chiều rộng và chiều cao (để hiển thị hình ảnh theo phương thức) và vì không có gì ở trên giúp tôi, tôi quyết định ghi đè lên các kiểu và đã thêm các mục sau vào <div> chính class = "modal hidden fade in" trong đó: tức là thêm chiều rộng cho thẻ kiểu cho nền của phương thức.

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

và sau đó thêm các thẻ 'style' sau đây vào thân modal:

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

hoạt động như một sự quyến rũ bây giờ, tôi đang hiển thị một hình ảnh và bây giờ nó phù hợp hoàn hảo.

Điều này làm việc cho tôi:

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

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

Lưu ý rằng trong trường hợp của tôi, tôi có các phương thức lồng nhau, mỗi phương thức có các điều khiển yêu cầu độ cao khác nhau khi tôi chuyển đổi hiển thị của điều khiển bên trong phương thức lồng nhau , vì vậy tôi không thể áp dụng chiều cao tối đa , thay vào đó chiều cao: 100% hoạt động tốt với tôi.

Đừng quên các lớp bootstrap tùy chọn modal-lgvà modal-smnếu bạn muốn giữ trong khung đáp ứng. Và thêm một mã xóa bên dưới biểu mẫu của bạn, điều đó có thể giúp phụ thuộc vào cấu trúc của bạn.

Gần đây tôi đã thử điều này và nhận được điều này đúng: Hy vọng điều này sẽ hữu ích

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

Điều này sẽ điều chỉnh chiều cao của mô hình của bạn.

Đây là một phương pháp đơn giản khác để tăng kích thước của phương thức bootstrap:

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

Độ rộng của phương thức có thể được chỉ định theo tỷ lệ phần trăm của màn hình. Trong ví dụ trên tôi đã đặt nó tới 80% chiều rộng màn hình của tôi.

Dưới đây là một ví dụ hoạt động tương tự:

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