jQuery Date Picker ist größer als die Vorschauseite

Question

Ich versuche, das jQuery-Kalender-Tool zu testen, aber es scheint zu groß zu sein , größer als die Vorschauseite .

Irgendwelche Ideen?

Danke!

Answer 1

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

Answer 2

Es ist sehr wahrscheinlich, dass dies von einem Stylesheet gesteuert wird. Schaut man sich den Quelltext der Webseite an, so ist es entweder diese o diese .

Wie Sie sehen können, sind sie so, wie sie sind, ziemlich hässlich, aber Sie können sie durch einen Prettifier laufen lassen wie diese .

Oder Sie können einfach eine Version von JQuery UI herunterladen, die das Thema Leichtigkeit enthält. Meine Vermutung ist, dass es die richtigen Größen in es bereits hat.

Answer 3

Vergewissern Sie sich, dass Sie das gleiche jQueryUI-Theme verwenden wie die Demo-Site. Ich habe genau dieses Problem gesehen, wenn ich das falsche Theme auf meiner Seite geladen habe.

Answer 4

Fügen Sie einfach Ihre css-Zeile ein:

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

wie diese:

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

Answer 5

Ich bin auf ein ähnliches Problem gestoßen. Ich habe es gelöst, indem ich die Elemente mit dem Entwickler-Tool von Chrome untersucht habe und festgestellt habe, dass das div-Element, das den Datums-Picker enthält (d.h. das div mit der id ui-datepicker-div ) wurde an den body Element. Das Datumspicker-Div hat seine eigene font-size css-Attribut gesetzt auf 1.1em (aus der Klasse ui-widget in der Basis-CSS-Datei von jQuery UI). Da ich keine Schriftgröße für die Datei body Element (d. h. das Element, das den Datums-Picker enthält), wird standardmäßig die Option 16px laut dieser Blog . Die Festlegung einer expliziten font-size auf dem Körperelement hat das Problem für mich gelöst.