5

私は小さなプロジェクトに取り組んでおり、selectmenu とその項目を引き伸ばしてコンテナーを埋めるのに苦労しています。幅が設定されていて、どこにあるかわかりません。私はこのプラグインを初めて使用し、Web 開発者ではありません。

スタイルはスタイルシートで定義されているようです:

#PDropdown .ui-widget, .ui-selectmenu-menu .ui-widget{ 
font-family:'Lucida Sans';
font-size:.85em;
width: 97%; /* gets overridden....*/

}

ただし、ページがレンダリングされると、幅が適用されます。

<a class="ui-selectmenu ui-widget ui-state-default ui-corner-all ui-selectmenu-dropdown" id="PDropDownList-button" role="button" href="#nogo" tabindex="0" aria-haspopup="true" aria-owns="PDropDownList-menu" style="width: 135px;" aria-disabled="false"><span class="ui-selectmenu-status">Item</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>

これを 100% 幅に設定するにはどうすればよいですか? これが単純な場合は申し訳ありません。

4

3 に答える 3

3

通常、これはあまり良い方法ではありませんが、簡単にする!importantために、CSSルールに追加して、オーバーライドから保護します。このような：

width: 97% !important;

また、このルールを追加する必要がある場合もあります。

.ui-selectmenu-open {width: 97.3% !important;}

このページで動作しますhttp://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

繰り返しになりますが、これは本当に悪いハックであり、あなたがWeb開発者ではなく、最も簡単な解決策であるとあなたが言ったという理由だけでそれを提案しています。

于 2012-12-20T19:38:51.270 に答える
2

selectmenu の幅をパーセンテージで宣言しようとしましたが、jQuery は毎回それを 2% 減らします。どうしてか分かりません。

この例では、幅 98% の selectmenu を作成します。この選択メニューはレスポンシブです。

$("select").selecmenu(
    {
        width: "100%"
    }
);

「calc」関数を使用してこの動作を回避しました。

$("select").selecmenu(
    {
        width: "calc(100% - 1px)"
    }
);

折り返しを避けるために、jQuery によって selectmenu の幅が広げられるため、1 ピクセルの縮小があります。jQuery UIバージョン1.11.4にこのソリューションを使用しました

于 2015-08-06T14:53:47.863 に答える
1

これは私が動的に行う方法です（レスポンシブ、およびパーセンテージで）：

CSS でパーセンテージを宣言します。

 select{
    width: 100%;
 }

そしてあなたのJavaScriptで：

jQuery("select").selectmenu(
        {
            width:  jQuery(this).attr("width"),
        }   
);
于 2015-02-20T23:39:23.247 に答える