首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在jquery-UI datepicker中调整年下拉菜单的高度

在jquery-UI datepicker中调整年下拉菜单的高度
EN

Stack Overflow用户
提问于 2018-05-29 17:11:00
回答 1查看 1.2K关注 0票数 0

我正在使用Jquery UI datepicker组件(jquery-ui-1.12.1)。但是我无法修改year dropdown的大小。我想修复下拉列表的高度(特别是‘年’),因为它显示了一个很长的列表,这溢出了窗口边界,在Mozila Firefox的情况下。图片如下:

有人能帮我解决这个问题吗?

EN

回答 1

Stack Overflow用户

发布于 2018-05-30 10:00:22

<select>的选项列表是由浏览器呈现的,它的overflowheight不容易管理。我有一个使用jQuery UI SelectMenu的变通方法。请看这里:

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

ul.ui-menu {
  max-height: 120px;
}
代码语言:javascript
复制
<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>元素。由于它是基于box模型的,所以您可以覆盖CSS并自己设置样式。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50580525

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档