twitter-bootstrap 在折叠的 Bootstrap 手风琴中开始时，所选下拉菜单的宽度接近于零

Question

提问by Jeroen

When a Chosen dropdown is inside a Bootstrap 3 accordion that's initially hidden, then the width of the dropdown is near zero. After expanding it looks like this:

当 Chosen 下拉菜单位于最初隐藏的 Bootstrap 3 手风琴内时，下拉菜单的宽度接近于零。展开后是这样的：

width zero of select

选择的宽度为零

Whereas I expect it to look like this:

而我希望它看起来像这样：

width normal for select

选择的正常宽度

The problem occurs when the panel-collapse collapsedivdoes not have an inclass,effectively indicating it's initially collapsed. Here's the code to reproduce this issue:

当panel-collapse collapsediv没有in类时会出现问题，有效地表明它最初是折叠的。这是重现此问题的代码：

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

What can I do to prevent this from happening? Calling chosen as .chosen({width: '90%'});, i.e. with a hard-coded width works, but is not satisfactory (I want to style in my stylesheet or using Bootstrap). The only resolution left seems to be to hook into the expanding event and force a chosen update, but that also feels like a workaround.

我能做些什么来防止这种情况发生？调用 selected as .chosen({width: '90%'});，即使用硬编码宽度工作，但并不令人满意（我想在我的样式表中设置样式或使用 Bootstrap）。剩下的唯一解决方案似乎是挂钩扩展事件并强制选择更新，但这也感觉像是一种解决方法。

Preferably I'd have a line of CSS to fix this, or know whether this might even be a bug in the (combination of) tool(s)?

最好我有一行 CSS 来解决这个问题，或者知道这是否甚至可能是（组合）工具中的错误？

Answer 1

回答by Arbel

Reason:

原因：

Chosen calculates and assigns the width when the DOM is ready, before that the initial width for the emulated drop-down is zero.

当 DOM 准备好时，Chosen 计算并分配宽度，在此之前，模拟下拉列表的初始宽度为零。

Solution:

解决方案：

Add the following to your CSS so the dropdown has an initial width:

将以下内容添加到您的 CSS 中，以便下拉列表具有初始宽度：

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

The !importantpart is because chosen adds an inline style of width: 0;to the element itself and you need to override the specificity with !important.

这!important部分是因为 selectedwidth: 0;为元素本身添加了内联样式，并且您需要使用!important.

Answer 2

回答by antyrat

From jquery-chosenofficial documentation:

来自jquery 选择的官方文档：

The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.

选择的选择框的宽度。默认情况下，Chosen 会尝试匹配您要替换的选择框的宽度。如果在实例化 Chosen 时隐藏了选择，则必须指定宽度，否则选择将显示为宽度为 0。

So you need to specify widthattribute

所以你需要指定width属性

$(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:

编辑：

Also as a hack you can check visible selectbox width and apply it to all others:

同样作为一个黑客，您可以检查可见的选择框宽度并将其应用于所有其他人：

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

Answer 3

回答by gosukiwi

It works if you do

如果你这样做，它会起作用

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

Answer 4

回答by vincenzo

This way you'll give each select its initial size:

这样你就可以给每个选择它的初始大小：

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

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

})

Answer 5

回答by milkovsky

If the select is inside a hidden form, width is still 0. Here is my fix for it:

如果选择在隐藏表单内，则宽度仍为 0。这是我的修复方法：

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

回答by jramm

To avoid an inline widthstyle being applied by chosen, pass an empty string as the widthparameter when initializing your select.

为避免width选择应用内联样式，请width在初始化选择时传递一个空字符串作为参数。

$('#your-select-element').chosen({ width: '' });

Behind the scenes, chosen just calls jQuery .width()to set the width on the element using the value you supply.

在幕后， selected 只是调用 jQuery.width()来使用您提供的值设置元素的宽度。

By passing an empty string, the chosen-container element won't have any width style applied to it at all. Then you don't need to mess with !importantor other things that could conflict with your stylesheet.

通过传递一个空字符串， selected-container 元素根本不会应用任何宽度样式。然后你就不需要弄乱!important或其他可能与你的样式表冲突的东西。

Answer 7

回答by Sunand

You can call the select on show of the accordian that will set the exact height.

您可以调用将设置确切高度的手风琴显示选择。

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

twitter-bootstrap 在折叠的 Bootstrap 手风琴中开始时，所选下拉菜单的宽度接近于零

提问by Jeroen

回答by Arbel

回答by antyrat

回答by gosukiwi

回答by vincenzo

回答by milkovsky

回答by jramm

回答by Sunand

相关推荐

最近更新

标签

twitter-bootstrap 在折叠的 Bootstrap 手风琴中开始时，所选下拉菜单的宽度接近于零

提问by Jeroen

回答by Arbel

回答by antyrat

回答by gosukiwi

回答by vincenzo

回答by milkovsky

回答by jramm

回答by Sunand

相关推荐

twitter-bootstrap 对齐引导列字段中的文本

twitter-bootstrap Bootstrap Tab Pane 幻灯片效果

twitter-bootstrap Bootstrap Datepicker 2.0 选择多个日期

twitter-bootstrap TD 内的 Bootstrap 网格

相关推荐

最近更新

标签