jQuery-UI主题 - CSS大小差异 [英] jQuery-UI Theming - CSS Sizing Differences

问题描述

在网站上使用 jQueryUI 示例时（主题浏览器）东西看起来很棒。但是，当我把代码和主题放到我的应用程序中，尺寸是非常麻烦的（我试图利用Redmond主题）。

When using the jQueryUI samples on the website (theme browser) things look great. But, when I put the code and theme into my application, the sizing is way out of whack (I'm trying to utilize the Redmond theme).

任何想法为什么这些样品看起来如此不同？在我已经构建的应用程序中，只有一个用于Redmond主题的CSS引用...以下这些图像是它们如何呈现到浏览器。

Any ideas as to why these samples look so different? In the application I've built, there is only 1 CSS reference which is for the Redmond theme... These images below are exactly how they were rendered to the browser.

我的申请：

My Application:

jQuery UI示例

jQuery UI Sample:

我的申请代码： / strong>

My Application Code:

<div>
    <asp:TextBox ID="txtDateSample" runat="server"></asp:TextBox>
</div>
</form>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#<%= txtDateSample.ClientID %>').datepicker({
            showButtonPanel: true,
            showOn: 'button',
            buttonImage: '../Graphics/Icons/calendar.png',
            buttonImageOnly: true
        });
    });
</script>

Firebug Div视图：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"/>

推荐答案

这是因为您的某些样式无意中影响了日历div。获取Firebug并检查应用到日历的样式。然后编辑主题以覆盖您的样式正在执行的任何操作。

This used to happen to me. It is because some of your styles are inadvertently affecting the calendar div. Get Firebug and check out what styles are being applied to the calendar. Then edit the theme to override anything your styles are doing.

编辑：

您正在寻找的部分不是生成的HTML，虽然这很重要，但更多的是实际应用的样式：

The part you are looking for is not the HTML generated, although that is important, it is more of what styles are actually being applied:

您将看到正在应用的样式而已分配但未应用的样式将显示为 。您可能会在此窗口中看到一些样式。他们很可能是罪魁祸首。通过使它们更具体，并且您的日历应该很好去解决它们。

You will see styles that are being applied while styles that have been assigned but are not being applied will be shown struck out. You will probably see some of your styles in this window. They are most likely the culprit. Fix them by making them more specific and your calendar should be good to go.

这篇关于jQuery-UI主题 - CSS大小差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！