我已经实现了jQuery datepicker。它看起来工作正常,但日历太大了。
jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png
我正在处理的网站有很多层样式表和父页面和控件。我似乎无法隔离使它变大的东西。 (对不起,该网站不公开。)
日历显示基于字体大小。我尝试将文本框包装在一个较小字体的div中,但似乎忽略了这一点。有没有办法指定固定的字体大小?
答案 0 :(得分:25)
在更改.ui-widget
的字体大小时,我获得了以下最佳效果。
#ui-datepicker-div { font-size:11px; }
这不仅可以完全满足我的需要,而且也不太可能影响任何其他jquery-ui小部件。
答案 1 :(得分:7)
答案 2 :(得分:2)
需要在firebug中进行一些挖掘,但我已经包含了一个用于减少它的版本。关键是从jQuery-ui CSS文件中复制确切的样式,并将它们放在您需要它们的页面的头部,或者放在jQuery-ui样式表之后的CSS样式表中。
.ui-datepicker {
padding: 0.1em 0.1em 0;
width: 11em;
}
.ui-widget {
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
}
.ui-datepicker th {
border: 0 none;
font-weight: normal;
padding: 0.2em 0.1em;
text-align: center;
}
.ui-datepicker th span {
font-size: 11px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0.1em;
}
.ui-datepicker td {
padding: 0.9px;
}
.ui-datepicker .ui-state-highlight {
height: 12px;
margin-bottom: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-size: 10px;
font-weight: normal;
text-align: center;
}
.ui-datepicker .ui-datepicker-title {
line-height: 13px;
}
.ui-datepicker .ui-datepicker-title span {
font-size: 11px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin-left: -8px;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
height: 15px;
top: 1px;
width: 15px;
}
.ui-datepicker-next-hover .ui-icon {
height: 16px;
width: 16px;
}
答案 3 :(得分:2)
将此添加到site.css为我工作
.ui-widget {
font-size: .7em !important;
}
答案 4 :(得分:1)
你可以改变" jquery-ui-1.10.4.custom.css"如下
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
答案 5 :(得分:1)
我们的日历很大,看起来很丑,很难点击月份箭头。它是由jquery-ui css和jquery-ui js包含的不匹配版本引起的。
版本号必须匹配,例如
jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js
但也需要上面推荐的CSS
#ui-datepicker-div { font-size:11px; }
答案 6 :(得分:0)
我同意mdmullinax。您必须更改整个班级的字体大小
.ui-datepicker-div {font-size:11px; }
因为datepicker不受id控制,所以下面的更改对大小没有影响
ħ