Geek Answers Handbook

JQuery-UI Theming - CSS Size Differences

When using jQueryUI samples on a website ( browser theme ) everything looks great. But, when I put the code and theme into my application, size is a way out of the bump (I'm trying to use the Redmond theme).

Any ideas as to why these patterns look so different? In the application that I built, there is only 1 CSS link that is for the Redmond theme ... These images below exactly correspond to how they were displayed in the browser.

My application:
alt text http://www.imageunload.com/public/14462/jQueryUI.png

Example jQuery user interface:
alt text http://www.imageunload.com/public/14463/jQueryUI-Sample.png

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"/>
+3
3

. , div. Firebug , . , , .

EDIT:

, , - HTML, , , :

Firebug http://labs.pathf.com/ajax/blogposts/05052008/Firebug_Style_Tab.jpg

, , , , , out out out. , . , . , , .

+6

, , , - / , ..

.foo {width: 80%;}

-, , , 80% 80% 80%.

+1

index.php

<head>
<style>
    body{
        font-size: 62.5%; /* it is necessary for jquery ui */
        }
</style>
</head>

jquery-ui.

+1

More articles:


All Articles