更改jquery datepicker的高度
我正在尝试更改我正在使用的日期选择器的高度。 我一直在使用firebug并且能够通过编辑ui-datepicker
类来改变宽度,如下所示:
.ui-datepicker { width: 12em; height: 12em; }
宽度工作正常,但高度只会改变日历的背面,而不是单元格,所以我最终得到这样的东西:
datepicker背景的高度已更改,但单元格相同。 在类.ui-datepicker table
我厌倦了添加一行代码height: 80%
,但高度不会低于100%(或者至少任何更低的值都不会改变datepicker的外观)。 我一直在寻找css来试图找到高度设置的位置,但到目前为止还找不到它。 有什么建议?
我把它缩小了以下两行。 我将日期选择器的宽度从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; }
日期选择器内部有一些影响高度的不同元素。 我发现没有好的选择器可以扩展整个选择。
你提到让细胞更大。 为此,您可以在日期选择器内定位锚标记。
.ui-datepicker td a { height: 1.4em; }
做这样的事情将使所有单元格变大,整个日期选择器窗口将自动扩展。 请注意,增加此选择器的高度不会更改宽度。 尝试向此选择器添加“width”属性将产生不必要的填充。 你必须按照原来的方式去做。
.ui-datepicker { width: 12em; }
以下步骤帮助了我。
- 从\ Content \ themes \ base \打开CSS文件’jquery-ui.css’
- 转到“jQuery UI Datepicker 1.8.7”部分
- 根据要求.ui-datepicker .ui-datepicker表更改以下项目的宽度和高度属性
.ui-datepicker th
.ui-datepicker td
.ui-datepicker td span .ui-datepicker td a
这是修改后的UI http://sofzh.miximages.com/jquery/JQueryDatePicker.png
我认为你必须专门改变表格单元格的高度,例如:
.ui-datepicker td { height: 1em; }
这也将调整周围日期选择器的高度。
甚至小于给出的答案:
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 0.7em; }
更改字体大小,一切都更改
做到这一点。 高度将自动处理
.ui-datepicker { width: 12em; font-size:10pt; }
如果它是内联日期选择器,则有一个技巧。 只需给datepicker一些id。
。 现在根据需要更改datepicker的字体大小。 它会自动更改datepicker的大小。 css代码: #datepicker{ font-size: 20px; }
#datepicker{ font-size: 20px; }
由于选择的答案已经正确,但似乎没有正确调整高度和宽度。 就我而言,下面的代码完美无缺。
#ui-datepicker-div { font-size:11px; }
DEMO
尝试减少.ui-datepicker td的line-height属性。 当你这样做时,你可能不得不摆弄填充和字体大小以使数字适合框,但我认为行高会做你想要的。
我不能投票,那么这是我的
#dataAgenda2 .ui-widget { font-size: 0.8em !important; }
我使用以下代码完成了它:
.ui-datepicker { width: 200px; height:200px; }
这是一个小型JSFiddle示例,您可以根据需要更改宽度和高度。
改变填充!
.ui-datepicker td span, .ui-datepicker td a { padding: 10px 5px !important; }