Gestalten des jQueryUI DatePicker

Question

Ich verwende den jquery datepicker ( http://jqueryui.com/demos/datepicker/ ).

Der Datepicker auf der Demoseite ist klein und kompakt. Wenn ich jedoch die Datumsauswahl auf meiner Website verwende, ist der Kalender riesig. Ich würde schätzen, dass jedes Datum eine Schriftgröße von 12 pt hat.

Wie kann ich erreichen, dass die Tage kleiner werden?

Answer 1

Die einfache Antwort: Sie könnten eine Schriftgröße in Ihrem css zu ".ui-datepicker" hinzufügen.

Aber ich denke, dass Sie einige css-Regeln haben, die im Widerspruch zueinander stehen. Sie sollten die Methode aus Paulos Link verwenden, um zu prüfen, ob dies der Fall ist.

Answer 2

Dies ist ein bisschen spät, aber nur als Hinweis für die Zukunft: Fügen Sie dies zwischen Ihren , nach der jquery ui css Referenz.

<style type="text/css">
    .ui-datepicker { font-size: 9pt !important; }
</style>

und sie wird kleiner werden.

Answer 3

Die oberste Zeile von jquery.ui.theme.css hat die Schriftgröße:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; **font-size: .9em;** }

Answer 4

Keine Ihrer CSS-Regeln stehen im Widerspruch zueinander - ich kann dies mit 100%iger Sicherheit bestätigen!

Der Grund dafür ist, dass die Demo-Seiten von jQuery SEHR irreführend sein können. Wie Seth sagte, haben ihre Seiten viele zusätzliche CSS-Regeln auf der Standard-Bibliothek CSS hinzugefügt. Wenn Sie hier schauen:

http://jqueryui.com/demos/demos.css

Sie werden sehen, dass sie die Grundschriftgröße erheblich verkleinern, was die eigentliche Ursache ist.

Auch ich hatte genau das gleiche Problem, bei dem ich eine viel größere Datumsauswahl auf meinen Seiten erhielt als in der Demo. Um zu bestätigen, dass es war IHRE Ich benutzte das CSS-Menü der Webentwickler-Symbolleiste in Firefox, um die oben genannte CSS-Datei allein zu deaktivieren, und plötzlich hatte IHRE Demoseite große Datumsauswahlfelder in der gleichen Größe wie meine.

Daher ist die beste Antwort hier falsch - es liegt nicht an Ihnen - es liegt ausschließlich daran, wie SIE die Basisgröße verringert haben. Ich garantiere Ihnen, dass Sie, wenn Sie das ausprobieren, was ich hier erwähnt habe, das Gleiche finden werden.

Answer 5

JQuery UI hat eine Motivwalze die es Ihnen ermöglicht, eines der vorhandenen Themen einschließlich der Schriftarten, Farben und Hintergründe vor dem Herunterladen anzupassen. Sie können auch andere Dinge tun, wie den Eckenradius, die Ränder und die Polsterung einstellen.

Ich würde empfehlen, es so weit wie möglich anzupassen. vor Herunterladen, so dass Sie bei der Verwendung auf Ihrer Website weniger zu tun haben.

Vergessen Sie nicht, die Standard-Schriftgrößen und dergleichen für die gesamte Seite einzustellen nach haben Sie das jQuery UI-Stylesheet aufgerufen.