Question

当我下载jQuery-ui主题时，我需要添加什么才能使默认值与jQuery-ui演示页面中的相同？

我开箱即用的对话框很大（见下文）。我知道所有的css都可以从演示页面获得，但我不是一个真正的CSS专家，不知道该拿什么，还有什么要离开。

enter image description here

修改

这是jsFiddle link显示相同的内容。

修改

Answer 1

最好的方法是：改变基础jQuery-ui font-size：

.ui-widget{font-size:12px;}

有关示例，请参阅this fiddle。

Answer 2

我知道问题是什么：P

body{font-size:10px;}

尺寸相对于页面（更多流体布局）。因此（至少在小提琴中）改变身体的字体大小可以修复它。只需更改页面的字体大小，对话框就会随之改变。

http://jsfiddle.net/hnBmC/

Answer 3

对于此对话框标题问题，您只需将以下属性添加到对话框的父类

即可

.ui-dialog { clear: both; }

供参考， jQuery UI Dialog Titlebar too tall

Answer 4

如果您使用自己喜欢的网页检查器查看themeroller.css，那么您会发现： -

#themeroller {
    font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
    font-size: 12px;
}

HTML中的一些挖掘显示<div id="themeroller">包含页面的整个“演示”区域，因此所有jquery-ui小部件都在其中，因此它们的字体大小相对于这些值。< / p>

查看我的“太大”页面，普通文本的字体大小为18px。这来自themes / ui-darkness / jquery-ui.css中的.ui-widget，其font-size: 1em根据浏览器的基本字体大小16px进行计算。我通过检查一个简单的文件发现了这个基本尺寸：

<html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>

因此，如何设置jquery-ui小部件的字体大小的问题的答案是设置封闭元素的字体大小。 <body>（根据Joseph Marikle的建议）保证能够满足您的所有要求，但可能会因您的需求而过宽，在这种情况下您应该使用内部<div>。 <span>可能是邪恶的，因为你不应该在非块中包装块级别的东西 - 但是检查CSS Style Police的断言，我只是一个黑客！

我打算嘲笑为什么设计师选择基于em的高度，这是宽度，而不是ex，这是高度。但是，我怀疑答案是em在更广泛的字体范围内为您提供更一致的结果，因为大多数时候'l'的高度与'm'的宽度大致相同。相反，如果您使用2ex作为基本测量，那么与“x”的高度相比，您在字体上会有非常短或非常长的上升和下降的奇怪高度。

Answer 5

jquery ui是一个框架，您可以通过创建新主题或现有主题来修改它：

/*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 1em 0.3em;
    position: relative;
}

Answer 6

您可以使用此css规则应用较小的字体大小：

.ui-dialog{font-size: 62.5%;}

jQuery UI主题太大了

6 个答案: