Question

所以我下载了jQuery的自定义主题UI，并将日历控件添加到我的站点（例如：link text）。在示例中，它显示/显示我想要的大小，但在我的网页上它大约是两倍大小。为什么？？？

我确实有很多其他CSS但我无法控制页面的外观（无法触及当前的CSS，MEH !!）。有没有办法在我的网站上获得演示？

我认为这是jQuery UI可能使事情变得复杂的代码

/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; }
.ui-widget-content a { color: #616161; }
.ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }
.ui-widget-header a { color: #fff; }

它是Custom UI CSS的一部分

Answer 1

我明白了。正是字体大小抛弃了整个东西。我添加了这个标签，以正确显示我想要的尺寸：

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

如果其他人需要这样的东西

，效果会很好

Answer 2

.ui-widget{ font-size: 0.8em; }

这是解决方案，但是，我不知道的是，如果你把它放在这样的头元素中：

<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
</style>

它会覆盖其他设置，因此您仍然可以加载google托管的css但是使用它来覆盖它=）

Answer 3

要修复日历控件的大小，请更改：

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1 em; }

到此：

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }

有关详细说明，请访问 - http://blog.greatdevelopers.com/?p=33

Answer 4

如果要为所有jQuery的小部件设置字体大小或字体系列，最好设置如下内容：

.ui-widget {
    font-size: .7em;
}

调用加载jQuery UI CSS文件之后。

所有jQuery UI组件都是小部件，并在顶层继承.ui-widget样式。

Answer 5

DOM检查器（例如，Firebug，IE Developer Toolbar等）应该可以帮助您确定哪些CSS样式会影响您的日历。

也许哪一方禁止你触摸CSS会允许你在一个容器内自由统治？即，

<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>

如果没有，你显然可以控制JS。你应该可以用它来编写内联样式。

修改

您可能还会看到是否可以将您的内容包装在iframe中。

Answer 6

为了让我的日历更小，我不得不对css做一些更改。
正如其他一些人已经提到过的，我在页面内的样式标记中添加了以下行（因此它不会影响我网站上的所有其他日期选择器）

div.ui-datepicker{ font-size:7px;}

但这只会使标题尺寸缩小（月份）。为了使工作日标签和日期数更小，我还必须从jquery-ui-1.8.18.custom.css中复制以下两行并将它们放在我的页面中，但是我还必须添加字体-size specs for both。

.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;}
.ui-datepicker td { border: 0; padding: 1px; }

所以我最终得到的是：

<style type="text/css">
div.ui-datepicker{ font-size:7px;}
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size: 1.6em;}
.ui-datepicker td { border: 0; padding: 1px; font-size: 1.6em;}
</style>

这允许我控制日期和时间的字体大小。年，工作日标签和日期编号。

Answer 7

我建议你使用

.ui-datepicker { font-size:10px !important; }

而不是使用

#ui-datepicker-div { font-size:10px !important; }

因为与使用仅用于特定元素的元素选择器相比，css类选择器具有更宽的范围。您需要做的就是创建类类型的另一个html元素，您根本不必担心任何事情。

但是在你的问题中，你不需要做任何事情只需将类选择器添加到你自己的css文件而不是jquery-ui的那个，并且你已经排序，如果你需要创建另一个你没有的日期选择器担心以这种方式再次修改css。

Answer 8

使用CSS缩放

.ui-widget{ 
    -ms-transform: translate(-15%,-15%) scale(0.7);//translate must be before scale
    -moz-transform: translate(-15%,-15%) scale(0.7);
    -webkit-transform: translate(-15%,-15%) scale(0.7);
    transform: translate(-15%,-15%) scale(0.7);
}

在上面的代码中，我使用了＆＃34; sclale（0.7）＆＃34;这意味着新的宽度和高度将是原始值的70％。转换后的元素将具有原始元素的相同中心，因此减少了30％的宽度，这意味着从左侧减少15％，从右侧减少15％，高度相同。所以我们必须使用translate将新元素移动到左上角。＆＃34;翻译＆＃34;必须在＆＃34; scale＆＃34;之前所以＆＃34; 15％＆＃34;将是原始宽度的15％（即在我们缩放之前），而不是变换后的新宽度。

Answer 9

检查您的网页上是否存在css冲突 - 例如html / body或容器字体大小设置会流向日历。

Answer 10

你想要什么尺寸你可以通过在css中编辑这一行来设置。

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

只需提供另一种字体大小，例如.5em或.8em

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

它会起作用，我没有。

Answer 11

这很简单：Jquery-ui只是使用对象样式完成他的工作。我的意思是：

<html>
   <body
     <input type="text" id="date"/>
     <script type="text/javascript"> $("#date").datepicker()</script>
   </body>
</html>

日期编号和第十名的大小将根据以下函数设置：$（“＃date”）。css（“font-size”）。因此，如果输入的字体大小为6px，则datepicker看起来很小。如果font-size是42pt，它将是一个盲目的日期选择器！

Answer 12

我碰巧偶然发现了这一点，但尝试将DOCTYPE html添加到您的文档中

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

在打开html标记之前

。

jQuery UI日历显示太大，想要演示大小？

12 个答案: