เพิ่มขนาดกิริยาสำหรับ Twitter Bootstrap

ฉันกำลังพยายามเปลี่ยนขนาดของแบบฟอร์ม modal หรือค่อนข้าง - ให้มันตอบสนองต่อเนื้อหาที่ฉันแสดงที่นั่น ฉันใช้มันเพื่อแสดงผลแบบฟอร์มและต้องการจัดการกับการเลื่อนหากต้องการตัวเอง

รูปแบบที่ฉันแสดงอาจต้องการอีก 50px - แค่ปุ่มหาย

ดังนั้นฉันได้ลองเขียนทับ. modal style ในไฟล์ application.css.scss ของฉัน (โดยใช้ Rails 3.2) แต่ดูเหมือนว่าจะเขียนทับความสูงสูงสุดและล้นเกิน

ความคิดใด ๆ

ฉันมีปัญหาเดียวกันคุณสามารถลอง:

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

หากคุณสังเกตเห็นแถบเลื่อนปรากฏเฉพาะในส่วนเนื้อหาของกล่องโต้ตอบโมดัลนี่หมายความว่าต้องปรับความสูงสูงสุดของร่างกายเท่านั้น

ใน Bootstrap 3:

.modal-dialog{
  width:whatever
}

คุณต้องตรวจสอบให้แน่ใจว่ามันอยู่ในองค์ประกอบของ #myModal .modal-body ไม่ใช่แค่ #myModal (มีคนทำผิดสองสามข้อ) และคุณอาจต้องการเปลี่ยนแปลงความสูงด้วยการเปลี่ยนระยะขอบของ modals

การใช้การวัด CSS3 'vh' (หรือ 'vw' สำหรับความกว้าง) ใหม่ (ซึ่งกำหนดความสูงเป็นส่วนของพอร์ตมุมมอง) ใช้:

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

ด้วยวิธีนี้หากคุณใช้เฟรมเวิร์กที่ตอบสนองได้เช่น Bootstrap คุณสามารถคงการออกแบบนั้นไว้ใน modals ของคุณได้เช่นกัน

การรวมสองวิธีสำหรับความกว้างและความสูงและคุณมีแฮ็คที่ดี:

CSS:

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

JQuery:

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

อันนี้เป็นอันที่ฉันใช้ มันแก้ไขระยะขอบและแถบเลื่อนออกทั้งความกว้างและความสูง แต่จะไม่ปรับขนาด modal ให้พอดีกับเนื้อหา

หวังว่าฉันจะช่วย!

ใช้คลาส CSS (คุณสามารถแทนที่สไตล์ - ไม่แนะนำ):

(HTML)

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

(CSS)

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

ฉันได้รับคำตอบ ... สิ่งที่คุณเขียนทับคุณลักษณะความสูงสูงสุดเช่นเดียวกับ bootstrap modal สามารถปรับขนาดได้เกินขีดจำกัดความสูง 500px

Bootstrap โมเดลขนาดใหญ่

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

Bootstrap รุ่นเล็ก

<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",

ขนาดตัวเลือก

Modals มีสองขนาดให้เลือกใช้งานผ่านคลาสตัวดัดแปลงที่จะอยู่ใน. mod-dialog

1. เริ่มต้น: 600px
2. sm: ขนาดเล็กความกว้าง 300px
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;
}

นี่คือ codepen:

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

สมมติว่าโมดอลของคุณมี ID ของmodal1CSS ต่อไปนี้จะเพิ่มความสูงของโมดัลและแสดงโอเวอร์โฟลว์ใด ๆ

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

พยายามสองสามข้อข้างต้นตามต้องการกำหนดขนาดเฉพาะของความกว้างและความสูง (เพื่อแสดงรูปภาพเป็นโมดอล) และเนื่องจากไม่มีใครช่วยฉันได้ฉันจึงตัดสินใจแทนที่สไตล์และเพิ่มสิ่งต่อไปนี้ลงใน <div> หลักที่มี class = "modal hide fade in": เพิ่มความกว้างให้กับแท็กสไตล์สำหรับพื้นหลังของคำกริยา

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

จากนั้นเพิ่มแท็ก 'style' ต่อไปนี้ลงใน modal-body:

<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; 
}

ทราบว่าในกรณีของฉันฉันมี Modals ซ้อนกันแต่ละควบคุมซึ่งต้องมีความสูงที่แตกต่างกันเมื่อฉันสลับการแสดงผลของการควบคุมภายในกิริยาที่ซ้อนกันดังนั้นผมจึงไม่สามารถใช้สูงสุดสูงแทนความสูง: 100%งานสำหรับผมที่ดี

อย่าลืมคลาสบูทสแตรปที่เป็นตัวเลือกmodal-lgและmodal-smถ้าคุณต้องการเก็บไว้ในกรอบการตอบสนอง และเพิ่ม clearfix ด้านล่างแบบฟอร์มของคุณซึ่งอาจช่วยได้ขึ้นอยู่กับโครงสร้างของคุณ

ฉันเพิ่งลองและได้รับสิ่งนี้ถูกต้อง: หวังว่านี่จะเป็นประโยชน์

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

สิ่งนี้จะปรับความสูงของโมเดลของคุณ

นี่เป็นอีกวิธีง่าย ๆ ในการเพิ่มขนาดของ modal bootstrap:

$(".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>