Измените высоту выпадающего списка для Year в jquery-UI datepicker - PullRequest
Новая
       20

Измените высоту выпадающего списка для Year в jquery-UI datepicker

0 голосов
/ 29 мая 2018

Я использую компонент DatePicker пользовательского интерфейса Jquery (jquery-ui-1.12.1).Но я не могу изменить размер выпадающего списка.Я хочу зафиксировать высоту выпадающего меню (особенно для «года»), так как он показывает длинный список, который выходит за границы окна, в случае с Mozila Firefox.Вот картинка:

enter image description here

Может кто-нибудь помочь мне решить эту проблему?

1 Ответ

0 голосов
/ 30 мая 2018

Список опций для <select> отображается браузером, и его overflow и height не могут быть легко управляемы.У меня есть обходной путь, используя jQuery UI SelectMenu.Смотрите здесь: 

$(function() {
  $("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true
  });
  $("#datepicker").click(function() {
    setTimeout(function() {
      $(".ui-datepicker-month, .ui-datepicker-year").selectmenu();
    }, 10);
  });
});
span.ui-selectmenu-button.ui-button {
  width: 30%;
}

ul.ui-menu {
  max-height: 120px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

Заменяет элемент <select> на управляемый выпадающий список.Так как он основан на блочной модели, вы можете использовать CSS и стилизовать его самостоятельно.

...