jQuery-UI Theming - CSS Größenunterschiede

Wenn Sie die jQueryUI Beispiele auf der Website (theme browser) verwenden, sehen die Dinge gut aus. Aber, wenn ich den Code und das Thema in meine Anwendung einfüge, ist die Dimensionierung weit entfernt (ich versuche das Redmond-Thema zu verwenden).jQuery-UI Theming - CSS Größenunterschiede

Irgendwelche Ideen, warum diese Proben so unterschiedlich aussehen? In der Anwendung, die ich gebaut habe, gibt es nur 1 CSS-Referenz, die für das Redmond-Thema ist ... Diese Bilder unten sind genau wie sie in den Browser gerendert wurden.

Meine Anwendung:
alt text http://www.imageunload.com/public/14462/jQueryUI.png

jQuery UI-Beispiel:
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 Ansicht von Div:

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

Quelle

2009-03-18 RSolberg

Hier ist die Lösung http://stackoverflow.com/questions/8812401/jquery-data-picker-font-size-issue/8812568#8812568 –

Diese verwendet, um mich zu geschehen. Dies liegt daran, dass einige Ihrer Stile unbeabsichtigt das Kalender-Div beeinflussen. Holen Sie Firebug und überprüfen Sie, welche Stile auf den Kalender angewendet werden. Bearbeiten Sie dann das Design, um alles, was Ihre Stile tun, zu überschreiben.

EDIT:

Der Teil nach dem Sie suchen ist nicht die HTML erzeugt, obwohl das wichtig ist, ist es mehr von dem, was Arten sind tatsächlich eingehalten werden:

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

Sie Es werden Stile angezeigt, die angewendet werden, während zugewiesene Stile, die jedoch nicht angewendet werden, angezeigt werden ~~gestrichen~~ . In diesem Fenster werden Sie wahrscheinlich einige Ihrer Stile sehen. Sie sind höchstwahrscheinlich der Schuldige. Beheben Sie sie, indem Sie sie genauer spezifizieren und Ihr Kalender sollte gut sein.

Quelle

2009-03-18 01:41:52

Ich frage mich, ob das ist, warum sie die "Thema bearbeiten" -Funktionalität bieten. Modifizierte die Schriftgröße und das schien den Trick zu machen. – RSolberg

Ah, gut. Ich denke, mein Schnitt war damals umsonst. :) –

Danke. Ich werde mir das heute Abend noch einmal ansehen. Ich glaube, es war die Einstellung der Schriftgröße für das Thema. 1.1em gegenklein. – RSolberg

Wenn die Dinge sind kleiner, als Sie erwarten, eine gute Annahme wäre, dass irgendeine Art von Prozentsatz/proportional Dimensionierung rekursiv geschieht, das heißt, dass Sie habe

bekam

.foo {width: 80%;}

irgendwo und angewendet wurde zweimal oder mehr, was bedeutet, dass Ihre Breite bei 80% von 80% von 80% endet.

Quelle

2009-03-18 22:35:50 AmbroseChapel

diesen Code in Ihrer Seite index.php oder zu Hause oder auf jeder Seite

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

es ist eine rechtliche Kodierverfahren, um die Größen der Schriftart oder Tags zu verwalten, wenn Sie verwenden jquery-ui hinzufügen.

Quelle

2013-06-12 07:54:49

jQuery-UI Theming - CSS Größenunterschiede

Antwort

Verwandte Themen