更改jquery日期选择器的高度

Question

我正在尝试更改我正在使用的日期选择器的高度。我一直在使用firebug并且能够通过编辑ui-datepicker类来改变宽度，如下所示：

.ui-datepicker
{ 
    width: 12em;
    height: 12em;
}

宽度工作正常，但高度只会改变日历的背面而不是单元格，所以我最终会得到这样的结果：

日期选择器背景的高度已更改，但单元格相同。在课程.ui-datepicker table中，我厌倦了添加一行代码height: 80%，但高度不会低于100％（或者至少任何更低不会改变日期选择器的外观）。我一直在寻找css来试图找到高度设置的位置，但到目前为止还找不到它。 有什么建议吗？

Answer 1

我把它缩小了以下两行。我将datepicker的宽度从14更改为12em;并将字体设置为.7em。

.ui-datepicker { width: 12em; padding: .2em .2em 0; display: none; }
.ui-datepicker table {width: 100%; font-size: .7em; border-collapse: collapse; margin:0 0 .4em; }

Answer 2

日期选择器内部有一些影响高度的不同元素。我发现没有好的选择器可以扩展整个选择。

你提到让细胞更大。为此，您可以在日期选择器内定位锚标记。

.ui-datepicker td a
{    
  height: 1.4em;   
}

执行类似操作会使所有单元格变大，整个日期选择器窗口将自动扩展。请注意，增加此选择器的高度不会更改宽度。尝试向此选择器添加“width”属性将产生不必要的填充。你必须按照原来的方式去做。

.ui-datepicker
{ 
    width: 12em;
}

Answer 3

以下步骤帮助了我。

1. 打开CSS文件＆＃39; jquery-ui.css＆＃39;来自\ Content \ themes \ base \
2. 转到jQuery UI Datepicker 1.8.7＆＃39;
部分
3. 根据要求更改以下项目的宽度和高度属性     的.ui-日期选择器     .ui-datepicker表
       .ui-datepicker th     .ui-datepicker td
       .ui-datepicker td span     .ui-datepicker td a

以下是修改后的用户界面 http://arunduth.net/Images/JQueryDatePicker.png

Answer 4

我认为您必须专门更改表格单元格的高度，例如像这样：

.ui-datepicker td {
    height: 1em;
}

这也将调整周围日期选择器的高度。

Answer 5

甚至小于给出的答案：

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 0.7em; }

更改字体大小，更改所有内容

Answer 6

做到这一点。高度将自动处理

.ui-datepicker {
    width: 12em;
    font-size:10pt;
}

Answer 7

如果它是内联日期选择器，则有一个技巧。 只需给datepicker一些id。<div id="datepicker" ></div>。 现在根据需要更改datepicker的字体大小。它会自动更改datepicker的大小。 css代码： #datepicker{ font-size: 20px; }

Answer 8

由于选择的答案已经正确，但似乎没有正确调整高度和宽度。就我而言，下面的代码工作得很好。

#ui-datepicker-div { font-size:11px; }

DEMO

Answer 9

尝试减少.ui-datepicker td的line-height属性。当你这样做时，你可能不得不摆弄填充和字体大小以使数字适合框，但我认为行高会做你想要的。

Answer 10

我不能投票，然后这是我的

#dataAgenda2 .ui-widget { font-size: 0.8em !important; }

Answer 11

我使用以下代码完成了它：

.ui-datepicker {
  width: 200px;
  height:200px;
}

Here是一个小型JSFiddle示例，您可以根据需要更改宽度和高度。

Answer 12

更改填充！

.ui-datepicker td span, .ui-datepicker td a {
    padding: 10px 5px !important;
}