更改 jquery datepicker 的高度答案

【问题标题】：Changing the height of a jquery datepicker更改 jquery datepicker 的高度
【发布时间】：2011-04-14 20:50:38
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery css jquery-ui

【解决方案1】：

我把它变小了，改变了以下两行。我将日期选择器的宽度从 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; }

【讨论】：

【解决方案2】：

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

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

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

这样做会使所有单元格变大，并且整个日期选择器窗口将自动展开。请注意，增加此选择器的高度不会改变宽度。尝试向此选择器添加“宽度”属性将创建不需要的填充。你必须按照你最初的做法去做。

.ui-datepicker
{ 
    width: 12em;
}

【讨论】：

【解决方案3】：

以下步骤帮助了我。

从 \Content\themes\base\ 打开 CSS 文件“jquery-ui.css”
移至“jQuery UI Datepicker 1.8.7”部分
根据要求更改以下项目的宽度和高度属性 .ui-日期选择器 .ui-datepicker 表
.ui-datepicker th
.ui-datepicker td
.ui-datepicker td 跨度 .ui-datepicker td a

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

比给出的答案还要小：

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

改变字体大小，一切都会改变

【讨论】：

【解决方案6】：

只做这个。高度会自动处理

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

DEMO

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

我不能投票，那么这是我的

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

【讨论】：

【解决方案11】：

我是使用以下代码完成的：

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

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

【讨论】：

【解决方案12】：

更改填充！

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

【讨论】：