Width Chosen Dropdowns gần bằng không khi bắt đầu vào năm sụp đổ Bootstrap accordion

Question

Khi thả xuống Chosen là bên trong một 3 accordion Bootstrap đó là ban đầu ẩn, sau đó chiều rộng của thả xuống là gần bằng không. Sau khi mở rộng nó trông như thế này:

Trong khi đó tôi hy vọng nó sẽ giống như thế này:

Vấn đề xảy ra khi panel-collapse collapsediv không có một lớp in, cho thấy hiệu quả ban đầu nó bị sập. Dưới đây là đoạn code để tạo lại vấn đề này:

$(document).ready(function() { 
 
    $('select').chosen(); 
 
});

.panel-heading { cursor: pointer; } 
 
body { padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
      Expand me to show the issue! 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This select has a near-width zero:</p> 
 
     <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
     <h4 class="panel-title"> 
 
      Already expanded/how it <em>should</em> be 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse in"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This panel is initially visible and <em>does</em> have correct width for the select box:</p> 
 
      <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Những gì tôi có thể làm gì để ngăn chặn điều này xảy ra? Gọi được chọn là .chosen({width: '90%'});, tức là với chiều rộng mã hóa cứng hoạt động, nhưng không thỏa đáng (tôi muốn tạo kiểu trong biểu định kiểu của tôi hoặc sử dụng Bootstrap). Độ phân giải duy nhất còn lại dường như là để móc vào sự kiện mở rộng và buộc một bản cập nhật đã chọn, nhưng điều đó cũng cảm thấy giống như một giải pháp thay thế.

Tốt hơn là tôi nên có một dòng CSS để sửa lỗi này hoặc biết liệu đây có thể là lỗi trong (các) công cụ (kết hợp) không?

Answer 1

Lý do:

tính toán của Chosen và gán độ rộng khi DOM đã sẵn sàng, trước đó chiều rộng ban đầu cho mô phỏng thả xuống là zero.

Giải pháp:

Thêm dòng sau vào CSS của bạn để thả xuống có chiều rộng ban đầu:

.chosen-container.chosen-container-single { 
    width: 300px !important; /* or any value that fits your needs */ 
} 

Phần !important là vì lựa chọn thêm một inline style width: 0; đến các yếu tố bản thân và bạn cần ghi đè đặc trưng với !important.

Answer 2

Từ jquery-chosen tài liệu chính thức:

Chiều rộng của Chosen chọn hộp. Theo mặc định, chọn được chọn để khớp với chiều rộng của hộp chọn bạn đang thay thế. Nếu lựa chọn của bạn là bị ẩn khi chọn được khởi tạo, bạn phải chỉ định chiều rộng hoặc lựa chọn sẽ hiển thị với chiều rộng là 0.

Vì vậy, bạn cần phải xác định width thuộc tính

$(document).ready(function() { 
 
    $('select').chosen({ width: '100%' }); 
 
});

.panel-heading { cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
      Expand me to show the issue! 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This select has a near-width zero:</p> 
 
     <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
     <h4 class="panel-title"> 
 
      Already expanded/how it <em>should</em> be 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse in"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This panel is initially visible and <em>does</em> have correct width for the select box:</p> 
 
      <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

EDIT:

Cũng như một hack bạn có thể kiểm tra độ rộng selectbox nhìn thấy và áp dụng nó vào tất cả những người khác:

$(document).ready(function() { 
    $('select').chosen({ width: $('.panel-collapse.collapse.in select').eq(0).width() + 'px' }); 
}); 

Answer 3

Bạn có thể gọi chọn hiển thị của accordian để đặt chiều cao chính xác.

$(document).ready(function() { 
 
    $("#accordion").on("show",function(){ 
 
     $('select').chosen(); 
 
    })   
 
});

.panel-heading { cursor: pointer; } 
 
body { padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
      Expand me to show the issue! 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This select has a near-width zero:</p> 
 
     <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
     <h4 class="panel-title"> 
 
      Already expanded/how it <em>should</em> be 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse in"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This panel is initially visible and <em>does</em> have correct width for the select box:</p> 
 
      <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Bằng cách này bạn sẽ cung cấp cho mỗi chọn kích thước ban đầu của nó:

$('select').each(function(){ 

    $(this).chosen({ width: $(this).eq(0).width() + 'px' }); 

}) 

Answer 5

Nếu chọn là bên trong một hình thức ẩn, chiều rộng vẫn là 0. Đây là sửa chữa của tôi cho nó:

$(document).ready(function() { 
    refreshSelects(); 
    }); 

    /** 
    * Re-draws selects to fix width of 'chosen' wrapper. 
    */ 
    refreshSelects = function() { 
    $('select').each(function(){ 
     // Re-calculate width of every select wrapper. Hidden selects width is 
     // calculated as 0 by 'chosen' plugin. 
     $(this).siblings('.chosen-container').css('width', realWidth($(this))); 
    }); 

    /** 
    * Calculates real width of an element. 
    * 
    * @param {object} $element 
    * jQuery object. 
    * 
    * @returns {string} 
    * Element width string. 
    */ 
    function realWidth($element){ 
     var $clone = $element.clone(); 
     $clone.css("visibility","hidden"); 
     $('body').append($clone); 
     var width = $clone.outerWidth(); 
     $clone.remove(); 
     return width; 
    } 
    } 

Answer 6

Nếu hoạt động nếu bạn làm

$('.my-element').chosen({width:"auto"});