jQuery UI 日历显示太大，需要演示大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1014766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Calendar displays too large, would like the demo size?
提问by Phill Pafford
So I downloaded a custom themed UI for jQuery and added the calendar control to my site (Example: link text). In the example it shows/displays the size I would like but on my webpage it's about twice the size. why???
因此，我为 jQuery 下载了一个自定义主题 UI，并将日历控件添加到我的网站（例如：链接文本）。在示例中，它显示/显示我想要的大小，但在我的网页上它大约是两倍大小。为什么？？？
I do have a ton of other CSS but I don't have control over the look and feel of the page (Can't touch current CSS, MEH!!). Is there a way to get the demo look on my site?
我确实有很多其他 CSS，但我无法控制页面的外观和感觉（无法触摸当前的 CSS，MEH ！！）。有没有办法在我的网站上获得演示外观？
I think this is the code that jQuery UI has that might be complicating things
我认为这是 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; }
It's part of the Custom UI CSS
它是自定义 UI CSS 的一部分
回答by Phill Pafford
I figured it out. It was the font size that was throwing the whole thing off. I added this tag to correctly display the size I wanted:
我想到了。正是字体大小使整个事情变得糟糕。我添加了这个标签来正确显示我想要的尺寸：
#ui-datepicker-div { font-size: 12px; }
Works great if anyone else needs something like this
如果其他人需要这样的东西，效果很好
回答by gideon
.ui-widget{ font-size: 0.8em; }
That is the solution, but, what I didn't know is if you put it into the head element like this:
这就是解决方案，但是，我不知道您是否像这样将其放入 head 元素中：
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
</style>
It overrides other settings, so you can still load the google hosted css but use this to override it =)
它会覆盖其他设置，因此您仍然可以加载 google 托管的 css，但可以使用它来覆盖它 =)
回答by Shekhar Agarwal
To fix the size of the calendar control change this:
要修复日历控件的大小，请更改以下内容：
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1 em; }
to this:
对此：
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
For detailed instructions please visit - http://blog.greatdevelopers.com/?p=33
有关详细说明，请访问 - http://blog.greatdevelopers.com/?p=33
回答by Harish
If you want to set font size or font family for all of jQuery's widgets, it would be better to set something like this:
如果要为所有 jQuery 小部件设置字体大小或字体系列，最好设置如下：
.ui-widget {
font-size: .7em;
}
after the call to load jQuery UI CSS files.
在调用加载 jQuery UI CSS 文件之后。
All jQuery UI components are widgets and inherit the .ui-widgetstyle at the top level.
所有 jQuery UI 组件都是小部件，并.ui-widget在顶层继承样式。
回答by steamer25
A DOM inspector (e.g., Firebug, IE Developer Toolbar, etc.) should help you determine which CSS styles are affecting your calendar.
DOM 检查器（例如 Firebug、IE Developer Toolbar 等）应该可以帮助您确定哪些 CSS 样式正在影响您的日历。
Perhaps whichever party is barring you from touching the CSS would allow you free reign within a container? I.e.,
也许任何一方禁止您接触 CSS 都可以让您在容器中自由支配？IE，
<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>
If not, you apparently have control over the JS. You should be able to write inline styles with that.
如果没有，您显然可以控制 JS。您应该能够使用它编写内联样式。
EDIT
编辑
You might also see if you can get your content wrapped in an iframe.
您还可以查看是否可以将内容包装在 iframe 中。
回答by Vincent
In order for me to make my calendar smaller I had to make a few more changes to the css.
As some other people already mentioned I added the following line to a style tag inside my page (so it doesn't affect all the other date pickers on my site)
为了让我的日历更小，我必须对 css 进行一些更改。
正如其他一些人已经提到的，我将以下行添加到我页面内的样式标记中（因此它不会影响我网站上的所有其他日期选择器）
div.ui-datepicker{ font-size:7px;}
But this only made the title size smaller (month year). In order to make the weekday labels and day numbers smaller I had to also copy the following two lines out of the jquery-ui-1.8.18.custom.css and put them in my page, but then I also had to add the font-size specs for both.
但这只会使标题大小变小（月年）。为了使工作日标签和日期数字更小，我还必须从 jquery-ui-1.8.18.custom.css 中复制以下两行并将它们放入我的页面中，但随后我还必须添加字体- 两者的尺寸规格。
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;}
.ui-datepicker td { border: 0; padding: 1px; }
So what I ended up with is the following:
所以我最终得到的是以下内容：
<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>
This allows me to control the font size for date & year, weekday labels, and date numbers.
这允许我控制日期和年份、工作日标签和日期数字的字体大小。
回答by A Malik
I will recommend you to use
我会推荐你使用
.ui-datepicker { font-size:10px !important; }
instead of using
而不是使用
#ui-datepicker-div { font-size:10px !important; }
because css class selectors have wider scope as compare to using element selectors which are only for specific element. All you need to do is create another html element of the class type and you don't have to worry about anything at all.
因为与使用仅用于特定元素的元素选择器相比，css 类选择器具有更广泛的范围。您需要做的就是创建另一个类类型的 html 元素，您根本不必担心任何事情。
However in your issue you don't have to do anything just add the class selector to your own css file NOT the one for jquery-ui, and you're sorted, if you need to create another datepicker you will not have to worry about modifying the css again this way.
但是，在您的问题中，您无需执行任何操作，只需将类选择器添加到您自己的 css 文件而不是 jquery-ui 文件中，并且您已排序，如果您需要创建另一个日期选择器，您将不必担心以这种方式再次修改css。
回答by Billel Hacaine
Use CSS zoom
使用 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);
}
In the code above, I have used "sclale(0.7)" which means that the new width and height will be 70% of the original values. The element after transformation will have the same centerof the original element, therefore reducing 30% of the width which means reducing 15% from the left and 15% from the right, the same thing for the height. So we have to use translate to move the new element to the top left. "translate" must be before "scale" so "15%" will be 15% of the original width (i.e. before we scale) and not of the new width after the transformation.
在上面的代码中，我使用了“sclale(0.7)”，这意味着新的宽度和高度将是原始值的 70%。转换后的元素将与原始元素具有相同的中心，因此宽度减少 30%，这意味着从左侧减少 15%，从右侧减少 15%，高度也是如此。所以我们必须使用 translate 将新元素移动到左上角。“translate”必须在“scale”之前，所以“15%”将是原始宽度（即我们缩放之前）的15%，而不是转换后新宽度的15%。
回答by N Joly
This is simple : Jquery-ui just do his job using object style. I mean :
这很简单：Jquery-ui 只是使用对象样式来完成他的工作。我的意思是 ：
<html>
<body
<input type="text" id="date"/>
<script type="text/javascript"> $("#date").datepicker()</script>
</body>
</html>
The size of date number and munth name will be set in function of the : $("#date").css("font-size"). So, if the input has 6px as font-size, datepicker will look small. If font-size is 42pt, it will be a blind's date picker!
日期编号和月份名称的大小将在以下函数中设置：$("#date").css("font-size")。因此，如果输入的字体大小为 6px，则 datepicker 会看起来很小。如果 font-size 为 42pt，它将是一个盲人约会选择器！
回答by Michael
I just happened to stumble across this, but try adding the DOCTYPE html to your document
我碰巧偶然发现了这个，但尝试将 DOCTYPE html 添加到您的文档中
<!DOCTYPE html>
<html>
<body>
</body>
</html>
before your opening html tag.
在您打开 html 标签之前。
