jQueryUI Selectmenuで最大高さを設定してスクロールできるようにする

Question

新しいjQueryUI selectmenuウィジェットを使用して<select>ドロップダウンリストのカスタムスタイリングを取得し、完全な機能を維持しようとしています。しかし、大きなリストの場合は実際には役に立たないようです。開いたときのデフォルト状態では、ドロップダウン項目はページから離れずに実行され、スクロールは有効になっていません。標準的なHTML <select>のドロップダウンメニューを置き換えることができるプラグインでは、これは奇妙なことです。

これを修正する方法はありますか？表示されるドロップダウンアイテムの最大高さを設定し、スクロールを有効にしますか？たぶん私はAPIオプションを見逃していました。私はそれがいくつかの創造的なCSSで行うことができると思いますか？

Here is a JS Fiddle何が起こるかを示します。

Answer 1

確かにこれを行う方法はありますが、幸いにも、それは信じられないほど簡単です！あなたはjQueryのUIに任意の選択メニューを調整したい場合max-heightではなく.ui-selectmenu-menu .ui-menuに適用することができることを

#countries-menu { 
    max-height: 100px; 
} 

注：:)

あなたは、単に<ul>の最大の高さを定義する必要があります。

更新フィドル：https://jsfiddle.net/mjfnao1L/1/

・ホープこのことができます:)

Answer 2

を表示可能な高さの割合に高さを設定したい場合は、以下のこのコードを使用することができます。これは、大画面で、ユーザーがより多くのオプションを見ることができるようになります閲覧可能な高さの90％に設定します：

#countries-menu { 
    max-height: 90vh; 
} 

https://jsfiddle.net/yoate65g/