jQuery Date Picker ist größer als die Vorschau-Site

Question

Ich versuche, das jQuery-Kalender-Tool zu testen, aber es appears to be too big, größer als die preview page.

Irgendwelche Ideen?

Danke!

Answer 1

Ich lief auf das gleiche Problem. Ich musste die Schriftgrößen in der benutzerdefinierten CSS auf etwas anderes als 1.25em ändern. Ich glaube, dass ich klein verwendet habe, was ich anderswo in meiner App verwendet habe.

Beim Durchsuchen der Seite in FireFox konnte ich die gesamte Kalendersteuerung in FireBug überprüfen und die Schriftgröße auf mittel (ich denke, vielleicht klein) ändern und es perfekt an diesem Punkt gerendert. Ging einfach in das UI CSS und änderte es permanent und seither keine Beschwerden mehr.

Check out my post here ...

Answer 2

Haben Sie ein bestimmtes CSS, das die Schriftgröße anpasst? Das würde alle jQuery-Schriftgrößen anpassen.

Answer 3

Es ist sehr wahrscheinlich, dass ein Stylesheet dies steuert. Betrachtet man die Quelle der Webseite, ist dies entweder this one oder this one.

Wie Sie sehen können, sind sie ziemlich hässlich wie es ist, aber Sie können es durch einen prettifier wie this one ausführen.

Oder Sie können einfach eine Version von JQuery UI mit dem Helligkeitsthema herunterladen. Meine Vermutung ist, dass es bereits die richtigen Größen hat.

Answer 4

Überprüfen Sie, ob Sie das gleiche jQueryUI-Thema verwenden, das die Demosite verwendet. Ich habe dieses genaue Problem gesehen, indem ich das falsche Thema auf meiner Seite geladen habe.

Answer 5

Sie können Firebug's Inspect feature verwenden, um einen der Werte auszuwählen, und Sie werden sehen, welche Stylesheets die Schriftgröße festlegen. Dann können Sie es an Ihre Bedürfnisse anpassen.

Answer 6

Das hat etwas mit den CSS-Stilen zu tun, die Verwendung von jQuery wird (Dies knüpft an alle anderen Antwort über den CSS in), vor allem der Schriftgröße in em verglichenen zu px - Ich denke, es versucht, Stile von der Seite selbst oder etwas ähnliches zu erben.

Für mich war die Lösung der ui-Widget CSS-Klasse der font-size zu 11px in der folgenden CSS-Klasse resultieren zu ändern:

.ui-widget { 
-x-system-font:none; 
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; 
**font-size:11px;** 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
line-height:normal; 
} 

Answer 7

in der CSS-Datei ändert zum Beispiel der Schriftgrößemeine CSS-Datei geschieht

/css/smoothness/jquery-ui-1.8.1.custom.css 

und ich änderte

.ui-widget { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 1.1em; 
} 

zu

.ui-widget { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 0.7em; 
} 

Answer 8

Oder fügen Sie einfach diese CSS Linie zu sein:

#ui-datepicker-div { 
    font-size:12px !important; 
} 

Answer 9

Fügen Sie einfach in Ihrem CSS Linie:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } 
font-size: 0.7em; 

wie folgt aus:

.ui-datepicker { width: 17em; font-size: 0.7em; padding: .2em .2em 0; display: none; } 

Answer 10

Ich lief in ein ähnliches Problem. Ich löste es, indem ich die Elemente unter Verwendung des chrome-Entwicklertools untersuchte und erkannte, dass das div-Element, das den Datepicker enthielt (d. H. Das div mit der ID ui-datepicker-div), an das body-Element angehängt wurde. Der datepicker div hat sein font-size css-Attribut auf 1.1em gesetzt (aus der Klasse ui-widget in der Basis-CSS-Datei von jQuery UI). Da ich keine Schriftgröße für das Element body festgelegt habe (d. H. Das Element, das den Datumsauswahlpunkt enthält), wird standardmäßig 16px gemäß verwendet. Das Setzen eines expliziten font-size auf dem Körperelement löste das Problem für mich.