Chosen: 修复零宽度问题

创建于 2012-01-30 · 14评论 · 资料来源: harvesthq/chosen

我喜欢 Chosen，但是因为我使用了很多 ajax 和隐藏面板，所以我在 Chosen 呈现零宽度选择时遇到了地狱般的问题，显然是因为在选择可见之前计算了宽度。

我添加了一行似乎可以解决此问题（或提供解决方法），至少在我的情况下是这样。

在Chosen.prototype.set_up_html函数中，在“this.f_width = this.form_field_jq.outerWidth();”之后，添加：

  if (this.f_width==0) this.f_width = this.form_field_jq.css("width");

显然，这仅在 css 中明确设置宽度时才有效。但就我而言，它解决了问题。更好的修复将受到欢迎。

资料来源

gullbyrd

最有用的评论

希望这对某人有所帮助，因为它在我的项目中运行良好。

我刚刚添加了以下 CSS 规则：

.chosen-container
{
    width: 100% !important;
}

fabioduque 于 2014-01-15

👍22 ❤9 🎉1

所有14条评论

重复#92。

pfiller 于 2012-04-20

我必须在修复时进行此更改：
if (/px/.test(this.form_field_jq.css("width"))){
this.f_width = this.form_field_jq.css("width").replace("px", "");
} 别的 {
this.f_width = this.form_field_jq.css("width");
}
因为 this.form_field_jq.css("width"); 最后用 px 返回宽度

gastonfournier 于 2012-07-02

我有一个解决方案，这在我的项目中运行良好：

this.f_width = this.form_field_jq.outerWidth(); // 在 selected.jqeury.js 的这一行下添加以下代码

  if (this.f_width==0){ 
      var cloneObj= this.form_field_jq.clone();
      cloneObj.removeAttr('id');
      $(document.body).append(cloneObj);
      var w = cloneObj.width();
      cloneObj.remove();
      this.f_width=w;
  }

qinbx 于 2012-09-04

希望这对某人有所帮助，因为它在我的项目中运行良好。

我刚刚添加了以下 CSS 规则：

.chosen-container
{
    width: 100% !important;
}

fabioduque 于 2014-01-15

👍22 ❤9 🎉1

谢谢法比奥杜克！为 selected-container 设置 css 解决了我的问题！

nyothecat 于 2014-02-20

你真的不需要在 CSS 中设置宽度。当您初始化 Chosen 时，您可以正确地做到这一点。

$(".chosen-select").chosen({ width: '100%' }); // any acceptable CSS width will work

pfiller 于 2014-02-20

👍17 🎉1

实际上，我创建了一个 KO bindingHandler 来生成我选择的元素，并不是所有的元素都有 100% 的宽度，所以 CSS 是我的选择。尽管我可以在我的 bindingHandler 中将宽度设置为一个选项。

nyothecat 于 2014-02-20

谢谢@fabioduque它也对我

cortopy 于 2015-03-17

@pfiller ，谢谢！那解决了我的问题。

wilsonsmith 于 2015-09-29

为什么有时会发生这种情况？ :(

verybigelephants 于 2016-08-23

我使用了 css 方法，因为我不想查看我选择的所有地方（其他开发人员在构建新视图时可能会遇到同样的问题）。所以css全局修复了这个问题。谢谢@fabioduque

AlissonRS 于 2017-02-23

我在我的一个 WordPress 插件中使用条件逻辑遇到了这个问题......特别是宽度设置为 0px ......即使在 init 之后（我用chosen:ready选择的字段排入队列，所以如果它已经是 init并且我隐藏了父 div) ...但无论如何，这是我用来解决此问题的方法，当我的 jQuery 代码运行以在执行chosen:updated之前显示父 DIV 元素时

// This is the original select field
$field = $( '#' + field );

// This is the select field wrapper that I hide (just shown for reference)
$( '.fieldset-' + field ).show();

// Chosen container ID will be original select element ID + _chosen
var $chosen_container = $( '#' + field + '_chosen' );
if( $chosen_container && $chosen_container.width() === 0 ){
    $chosen_container.css( 'width', '100%' );
}

$field.trigger( 'chosen:updated' );

tripflex 于 2017-11-14

如果其他人仍然遇到此问题，请检查您何时调用 $(".chosen-select").chosen()。我在页面加载时有一个 javascript 函数调用列表，当我将 .chosen() 调用移动到列表顶部时，它正确应用了宽度，不再是零宽度。我把它移到上面的函数是检索一些数据并执行大量的 dom 操作。

jjStanley 于 2018-05-16

为什么我有 2 个搜索图标，我尝试了上述两种解决方案-
Screenshot from 2019-08-23 00-34-17

GhAc-2017 于 2019-08-22

此页面是否有帮助？

0 / 5 - 0 等级

Chosen: 修复零宽度问题

最有用的评论

所有14条评论

相关问题