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

注意!

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



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