7

選択した jQuery プラグインを使用しており、すべてを正しく行ったと思いますが、asp.net ドロップダウン リストの幅が小さすぎて結果が表示されません。

まず、ライブラリへの参照を追加しました。

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

CSSを含めました：

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

次に、クラスをドロップダウンに適用しました。

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

最後に、ドキュメントの準備ができ.chosen()ました：

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

ブラウザの html マークアップは次のとおりです。

ここに画像の説明を入力

マークアップは基本的に次のとおりです。

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

視覚的には次のようになります。

ここに画像の説明を入力

css があるので正しく適用されていると思います。コンソールにブラウザの問題はありません (chrome / ff / ie)。入力を開始することもできますが、結果が小さくなり、結果が表示されないだけですか?

アップデート

私が気付いた唯一のことDropDownListは、クラスchosen-selectがなく（基本的には単純な古いasp.netドロップダウンリスト）、ドキュメントの準備完了またはウィンドウのオンロードで選択されたものを適用していない場合です...適用.chosen()するだけの場合コンソール中に正しく表示されます。たとえば、適用しない単純なドロップダウンリストを次に示します.chosen。

ここに画像の説明を入力

したがって、正しいように見えます...コンソールセクション（google chrome）に移動して、次のことを行うと：

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

これは、コンソールに直接入力するだけで、次のように機能します。

ここに画像の説明を入力

しかしもちろん、コンソールに移動してこれを行うことなく、これを機能させる必要があります...

更新 2

レンダリングされた html を確認したところ、width: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>

セクションに注意してください

style="width: 0px;"

Google chrome をチェックすると、.css ファイルが参照されません。次のように表示されます。

スタイルと私が見るその下：

element.style {
 width: 0px;
}

これはどこから来ているのでしょうか？どうすれば削除できますか？

4

7 に答える 7

1

選択したコントロールは最初は非表示になっていますか (ポップアップ コンテナー内の例)?

もしそうなら、使用してみてください：

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

または、次のリンクで提案されている関連する css の修正。現時点では、最終的な修正はリリースされていません。

Github の問題: https://github.com/harvesthq/chosen/issues/92およびhttps://github.com/harvesthq/chosen/issues/795

于 2013-09-17T06:37:24.800 に答える
0

タブ内で「chosen-select」を使用しているときに、幅が 0 の問題が発生しました。そのタブに切り替えるときに、このコードを追加する必要がありました。

$(window).load(function(){
    $(".chosen-select").chosen();
});
于 2013-09-16T23:12:04.117 に答える
0

選択したフィールド ID がポップアップ内にある場合は、この CSS を試してください。これは私にとってはうまくいきました。

.chosen-container.chosen-container-multi {
    width: 100% !important;
}
于 2015-03-05T15:53:35.317 に答える
0

私たちは Web フォーム アプリで Chosen を使用しているので、他の誰かがこれを役に立つと思うかもしれないと思いました。

  1. ページがロードされたときにドロップダウン/リストボックスが表示されない場合は、Chosen をドロップダウン/リストボックスにインスタンス化するときに幅を設定する必要があります。たとえば、ページの読み込み時に表示されないポップアップ ダイアログがあります。ユーザーがボタン/アイコンをクリックすると表示されます。

  2. js で EndRequestHandlers を使用して、ポストバックを処理します。場合によっては、幅を設定して Chosen を再度インスタンス化する必要があります。次に例を示します。

$(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 は、他の場所で別の呼び出しから既に適用されていることを知るほど堅牢ではありません。そのため、Chosen プラグインを適用するために選択するセレクターに注意してください。もっと具体的にしたほうがいいです。
于 2014-11-20T14:02:07.907 に答える