jQuery在下拉列表中选择的插件看起来很奇怪?

[英]jQuery's chosen plugin on dropdownlists looks odd?


I'm using the jQuery plugin chosen and I believe I've done everything correctly however my asp.net drop down list's width is so small that I don't see the results.

我正在使用所选的jQuery插件,我相信我已经完成了所有操作但是我的asp.net下拉列表的宽度非常小,我没有看到结果。

First I added a reference to the libraries:

首先,我添加了对库的引用:

<script type="text/javascript" src="Chosen/chosen.jquery.js"></script>

I included the CSS:

我加入了CSS:

<link rel="stylesheet" href="Chosen/chosen.css" />

Then I applied the class to my drop down:

然后我将课程应用到我的下拉菜单中:

  <asp:DropDownList class="chosen-select" ID="ddlEmps" runat="server" AutoPostBack="True" 
                            ToolTip="Select the employee." 
                            onselectedindexchanged="ddlEmps_SelectedIndexChanged" >

Finally in document ready I .chosen() it:

最后在文件准备好了我.chosen()它:

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

Here is the html markup in the browser:

这是浏览器中的html标记:

enter image description here

The markup is basically:

标记基本上是:

<select name="ddlEmps" onchange="javascript:setTimeout('__doPostBack(\'ddlEmps\',\'\')', 0)" id="ddlEmps" title="Select the employee." class="chosen-select" style="display: none;">
    <option value="2661">Jon</option>
    <option value="2987">Joe</option>
    <option value="3036">Steve</option>
    <option selected="selected" value="68">Mark</option>
</select>

Here is what it looks like visually:

这是它在视觉上的样子:

enter image description here

I believe it is applying chosen correctly as the css is there, there are no browser issues in the console (chrome / ff / ie). I can even start typing things and the results get smaller, I just cant see the results?

我相信它正在应用正确,因为css在那里,控制台中没有浏览器问题(chrome / ff / ie)。我甚至可以开始打字并且结果变得更小,我只是看不到结果?

Update

The only thing I did notice is if I have a DropDownList that I do not have a class chosen-select on it (basically a plain old asp.net dropdownlist) and not applying chosen to it in document ready or window onload...if I just apply .chosen() to it during the console it appears correctly for instance here's a simple dropdownlist without applying .chosen:

我唯一注意到的是,如果我有一个DropDownList,我没有选择一个类 - 选择它(基本上是一个普通的旧asp.net下拉列表),而不是在文档就绪或窗口上加载选择它...如果我只是在控制台正确显示时将.chosen()应用于它,例如这里是一个简单的下拉列表而不应用.chosen:

enter image description here

So it looks correct...if I now go to the console section (google chrome) and just do:

所以它看起来是正确的...如果我现在去控制台部分(谷歌浏览器),只是做:

$("#ddlEREmployees").chosen();

That is just directly in the console I type that in then it works as shown:

这只是直接在我输入的控制台中,然后它的工作原理如下所示:

enter image description here

But of course I still need to make this work without having to go to the console and doing this...

但是当然我还是需要做这项工作而不必去控制台这样做......

Update 2

I looked at the rendered html and it is producing a width:0px but I'm not sure where its coming from:

我查看了渲染的html,它产生的宽度为:0px,但我不确定它的来源:

<div class="chosen-container chosen-container-single" style="width: 0px;" title="Select the employee." id="ddlEtimeEmps_chosen"><a class="chosen-single" tabindex="-1"><span>Jon</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>

Jon
    < / DIV>

Notice the section

请注意该部分

style="width: 0px;"

When I check google chrome it doesnt reference a .css file...it just says:

当我检查谷歌浏览器时,它不会引用.css文件...它只是说:

Styles and under that I see:

风格和下面我看到:

element.style {
 width: 0px;
}

Where could this be coming from? And how can I remove it?

这可能来自哪里?我该如何删除它?

7 个解决方案

#1


5  

I had to play with the jquery and remove the style...

我不得不玩jquery并删除样式......

$(".chosen-select").chosen(); $('.chosen-container').css('width', '');

$( “选择选。”)选择(); $('。selected-container')。css('width','');

This removed the CSS style I described in my initial question.

这删除了我在初始问题中描述的CSS样式。

#2


1  

Is your chosen control initially hidden (example inside a popup conatiner)?

你最初选择的控件是否被隐藏(例如在popup conatiner中)?

If so try use:

如果是这样尝试使用:

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

or some related css fix suggested in the following links; at the moment no final fix is released.

或以下链接中建议的一些相关的CSS修复;目前尚未发布最终修复程序。

Github issues: https://github.com/harvesthq/chosen/issues/92 and https://github.com/harvesthq/chosen/issues/795

Github问题:https://github.com/harvesthq/chosen/issues/92和https://github.com/harvesthq/chosen/issues/795

#3


0  

TRy using

$(".chosen-select").chosen({width: 10em;});

May be some css issue. TRy debugging css styles applied on the final choden div.

可能是一些CSS问题。在最终的choden div上应用调试css样式。

#4


0  

I had the 0 width problem when I was using the 'chosen-select' inside of a tab. Had to add in this code when switching to that tab.

当我在选项卡中使用“selected-select”时,我遇到了0宽度问题。切换到该选项卡时必须添加此代码。

$(window).load(function(){
    $(".chosen-select").chosen();
});

#5


0  

I thought maybe someone else might find this helpful, since we use Chosen in our webforms app.

我想也许其他人可能会觉得这很有用,因为我们在webforms应用程序中使用了Chosen。

  1. You need to set the width when you instantiate Chosen onto your dropdown/listbox, if the dropdown/listbox isn't visible when the page loads. For example, we have popup dialogs that aren't displayed on page load. They are shown when the user clicks a button/icon.

    如果在页面加载时下拉/列表框不可见,则需要在将选定项实例化到下拉列表框时设置宽度。例如,我们有弹出对话框,不会在页面加载时显示。用户单击按钮/图标时会显示它们。

  2. We use EndRequestHandlers in our js to handle postbacks. Sometimes we have to set the width and instantiate Chosen again. Here is an example:

    我们在js中使用EndRequestHandlers来处理回发。有时我们必须设置宽度并再次实例化选择。这是一个例子:

$(function() { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

$(function(){Sys.WebForms.PageRequestManager.getInstance()。add_endRequest(EndRequestHandler); Sys.WebForms.PageRequestManager.getInstance()。add_beginRequest(BeginRequestHandler);

function BeginRequestHandler(sender, args) {

}

function EndRequestHandler(sender, args) {
    if (args.get_error() == undefined) {
        var postBack = sender._postBackSettings;
        var postBackClass = postBack.sourceElement.className;

        if (postBack == null || postBack.sourceElement == null || postBackClass == null || postBackClass == "") {
        }
    }

    $('#filter-container select').chosen({ width: "100px", disable_search_threshold: 10, no_results_text: "Item Not Found" });

}

});

  1. Chosen isn't robust enough to know that it's already being applied from another call somewhere else. So be mindful of the selectors you pick to apply the Chosen plugin to it. It's better to be more specific.
  2. 选择不够强大,不知道它已经被其他地方的另一个呼叫应用了。所以请注意你选择的选择器将Chosen插件应用于它。最具体的是更具体。

#6


0  

If the chosen field id within a popup, try this css. This worked for me.

如果在弹出窗口中选择了字段ID,请尝试此css。这对我有用。

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

#7


0  

Another option that I ran across.

我跑过的另一个选择。

AbstractChosen.prototype.container_width = function () {
      var getHiddenOffsetWidth = function (el) {
        // save a reference to a cloned element that can be measured
        var $hiddenElement = $(el).clone().appendTo('body');
        // calculate the width of the clone
        var width = $hiddenElement.outerWidth();
        // remove the clone from the DOM
        $hiddenElement.remove();
        return width;
      };
      if (this.options.width != null) {
        return this.options.width;
      } else {
        return "" + (($(this.form_field).is(":visible"))
        ? this.form_field.offsetWidth
        : getHiddenOffsetWidth(this.form_field)) + "px";
      }
};
智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2013/09/16/7df53545ffbb38287c0a2c868952507a.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告