首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery DatePicker太大

jQuery DatePicker太大
EN

Stack Overflow用户
提问于 2011-07-19 23:13:31
回答 7查看 26.9K关注 0票数 16

我已经实现了jQuery日期选择器。它似乎工作得很好,但日历太大了。

jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png

我正在处理的站点有许多层的样式表、父页面和控件。我似乎无法分离出是什么让它变得如此庞大。(对不起,该网站不公开。)

日历似乎是基于字体大小的。我试着用一个小字体的div包住我的文本框,但它似乎忽略了这一点。有没有办法指定一个固定的字体大小?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2011-07-20 00:21:43

在更改.ui-widget works的字体大小时,我得到了以下最佳结果。

代码语言:javascript
复制
#ui-datepicker-div { font-size:11px; }

这不仅看起来完全符合我的需要,而且不太可能影响任何其他jquery-ui小部件。

票数 25
EN

Stack Overflow用户

发布于 2011-07-19 23:39:05

尝试为类.ui-datepicker设置font-size

代码语言:javascript
复制
.ui-datepicker {font-size:11px;}

http://jsfiddle.net/pxfunc/ps5cA/

票数 8
EN

Stack Overflow用户

发布于 2011-07-19 23:24:03

这需要深入挖掘firebug,但我已经包含了我用来减少它的一个版本。关键是从jQuery-ui CSS文件复制确切的样式,并将它们放在需要它们的页面的头部,或者放在jQuery-ui样式表之后的CSS样式表中。

代码语言:javascript
复制
.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;
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6749510

复制
相关文章

相似问题

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