jquery ui dropdown игнорирование высоты

Question

У меня есть пара длинных падений, поэтому я установил высоту, чтобы получить полосы прокрутки. Я использую выпадающие списки 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

Answer 1

Я знаю, что это немного старые, но я узнал, как это сделать с помощью 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 гарантирует, что полоса прокрутки будет использоваться только тогда, когда длина списка превысит высоту.
4. Вышеуказанный max-height даст вам 5 параметры, показанные в вашем списке, когда ваш размер шрифта установлен равным 0,9. Я оставляю это для вас, чтобы выполнить соответствующие вычисления, чтобы получить предпочтительное количество параметров s hown.
5. padding-right свойство требуется для браузеров, отличных от MSIE.Хотя я обнаружил, что MSIE правильно регулирует ширину списка, чтобы разместить текст для этой опции, Firefox, например, этого не делает. Добавление дополнения отбрасывает правую сторону от текста. К сожалению, это имеет неприятный эффект от этого и с MSIE, вызывая большую пустую область справа от текста опции. Проблема с взломом MSIE CSS могла бы устранить проблему, но я просто хочу решить основную проблему.

Если вы хотите, чтобы это было глобальное отредактировать JQuery-ui.structure.css файл. Я нахожу это лучшим решением, потому что тогда я могу точно настроить высоту на страницу, применив для каждой затронутой страницы значение max-height (я конвертирую файл css в Sass самостоятельно, упрощает работу).