1

長いドロップダウンがいくつかあるので、高さを設定してスクロールバーを表示します。jquery selectmenu ドロップダウンを使用しています。「開発者」ウィンドウ（f12）で表示でき、上書きされていないにもかかわらず、すべてのドロップダウンが高さを無視しています。私はそれをいくつかの方法で適用しようとしました：

CSS:

    .ddl
    {
        width: 310px;
        height: 200px;
    }

また

    .ddl
    {
        width: 310px;
        max-height: 200px;
    }

また

    .ddl
    {
        width: 310px;
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

必要なすべてのスクリプトが正しい順序であると確信しています。ドロップダウンでも、他のすべての jquery ui が機能しているためです。高さが無視されているだけです。

すべてのドロップダウンには「ddl」のクラスがあり、これはすべてのページのフッターに含まれています。 

$(".ddl").selectmenu();

含まれているスクリプトのリスト (順番) は次のとおりです。

    <link href="/Content/site.css" rel="stylesheet"/>
    <link href="/Content/custom.css" rel="stylesheet"/>
    <link href="/Content/h-menu.css" rel="stylesheet"/>

    <link href="/Content/themes/skps/jquery-ui.css" rel="stylesheet"/>
    <link href="/Content/themes/skps/jquery-ui.structure.css" rel="stylesheet"/>
    <link href="/Content/themes/skps/jquery-ui.theme.css" rel="stylesheet"/>

    <link href="/Content/themes/grid/ui.jqgrid.css" rel="stylesheet"/>

    <script src="/Scripts/jquery-1.11.1.js"></script>

    <script src="/Scripts/jquery-ui-1.11.1.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

    <script src="/Scripts/jquery.jqGrid.src.js"></script>
    <script src="/Scripts/grid.locale-en.js"></script>
    <script src="/Scripts/modernizr-2.6.2.js"></script>

問題があれば、これは ASP MVC4 アプリです。これがJSFiddleです。これは私の最初のフィドルなので、正しくやったかどうかはわかりません。 http://jsfiddle.net/battlfrog/jmhwxgom/

私はそれを次のように動作させようとしています: http://api.jqueryui.com/selectmenu/#method-menuWidget

4

1 に答える 1

0

これは少し古いことは知っていますが、CSS を使用してこれを行う方法を見つけました。jquery-ui.structure.cssファイルを直接編集するか、これをページの .css ファイルに適用できます。以下は、jquery-ui.structure.cssファイルを編集するときに使用されます。(これでできることは他にもたくさんありますが、必要な効果を得るために必要な基本的な変更はこれだけです。)

.ui-selectmenu-menu .ui-menu {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1px;
    padding-right: 10px;
    width: auto !important;
    max-height: 8.8em;}
  1. オーバーフロープロパティが削除され、overflow-y: autoが代わりに追加され ていることに注意してください。
  2. 幅は!importantで追加する必要があります。
  3. max-heightの代わりにheightを使用して、任意の高さに設定できますが、そうすると、1 つまたは 2 つのオプションがある場合でも、すべての選択メニューが同じ高さになります (したがって、下部に空のスペースが作成されます)。 max-height を使用すると、リストの長さが高さを超えた場合にのみスクロールバーが使用されるようになります。
  4. 上記のmax-heightは、font-size が 0.9em に設定されている場合、リストに表示される 5 つのオプションを提供します。ご希望の数のオプションを表示するための適切な計算は、お客様にお任せします。
  5. MSIE 以外のブラウザーでは、padding-right プロパティが必要です。MSIE はオプションのテキストに合わせてリストの幅を適切に調整することがわかりましたが、たとえば Firefox はそうではありません。パディングを追加すると、端の右側がテキストから離れます。残念なことに、これは MSIE で同様に行うという不快な効果があり、オプション テキストの右側に大きな空の領域が生じます。ここで MSIE CSS を少しハッキングすれば問題は解決するでしょうが、ここでは核となる問題に対処したいと思います。

これをグローバルにしたい場合は、jquery-ui.structure.cssファイルを編集してください。影響を受けるページごとに異なるmax-heightプロパティを適用することで、ページごとの高さを微調整できるため、これがより良い解決策であることがわかりました(css ファイルを自分で Sass に変換すると、作業がずっと簡単になります)。

于 2016-03-30T09:53:48.943 に答える