Der jQuery-UI-Kalender wird zu groß angezeigt. Möchten Sie die Demo-Größe?

Question 1

Also habe ich eine benutzerdefinierte thematische Benutzeroberfläche für jQuery heruntergeladen und das Kalendersteuerelement zu meiner Website hinzugefügt (Beispiel: Link Text). Im Beispiel zeigt/zeigt es die Größe an, die ich gerne hätte, aber auf meiner Webseite ist es ungefähr doppelt so groß. warum???

Ich habe eine Menge anderer CSS, aber ich habe keine Kontrolle über das Erscheinungsbild der Seite (kann das aktuelle CSS nicht anfassen, MEH !!). Gibt es eine Möglichkeit, den Demo-Look auf meiner Website zu erhalten?

Ich denke, dies ist der Code der jQuery-Benutzeroberfläche, der die Dinge komplizieren könnte

/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; }
.ui-widget-content a { color: #616161; }
.ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }
.ui-widget-header a { color: #fff; }

Es ist Teil des Custom UI CSS

Question 2

Ich habe es herausgefunden. Es war die Schriftgröße, die das Ganze abwarf. Ich habe dieses Tag hinzugefügt, um die gewünschte Größe korrekt anzuzeigen:

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

Funktioniert super, falls noch jemand so etwas braucht

Question 3

.ui-widget{ font-size: 0.8em; }

Das ist die Lösung, aber was ich nicht wusste, ist, wenn Sie es so in das Kopfelement einfügen:

<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
</style>

Es überschreibt andere EinstellungenSie können also immer noch das von Google gehostete CSS laden, aber verwenden Sie dies, um es zu überschreiben =)

Question 4

Um die Größe des Kalendersteuerelements zu korrigieren, ändern Sie Folgendes:

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

dazu:

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }

Für detaillierte Anweisungen besuchen Sie bitte – http://blog.greatdevelopers.com/?p=33

Question 5

Wenn Sie die Schriftgröße oder Schriftfamilie für alle Widgets von jQuery festlegen möchten, ist es besser, Folgendes festzulegen:

.ui-widget {
    font-size: .7em;
}

nach dem Aufruf zum Laden von jQuery-UI-CSS-Dateien.

Alle jQuery-UI-Komponenten sind Widgets und erben die .ui-widget Stil auf höchstem Niveau.

Question 6

Ein DOM-Inspektor (z. B. Firebug, IE Developer Toolbar usw.) sollte Ihnen dabei helfen, festzustellen, welche CSS-Stile Ihren Kalender beeinflussen.

Vielleicht würde Ihnen die Partei, die Sie daran hindert, das CSS zu berühren, innerhalb eines Containers freie Hand lassen? Dh,

<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>

Wenn nicht, haben Sie anscheinend die Kontrolle über das JS. Sie sollten in der Lage sein, damit Inline-Stile zu schreiben.

BEARBEITEN

Möglicherweise sehen Sie auch, ob Sie Ihren Inhalt in einen Iframe verpacken können.

Question 7

Um meinen Kalender kleiner zu machen, musste ich noch ein paar Änderungen am CSS vornehmen.
Wie einige andere Leute bereits erwähnt haben, habe ich die folgende Zeile zu einem Stil-Tag auf meiner Seite hinzugefügt (damit es nicht alle anderen Datumsauswahlen auf meiner Website beeinflusst)

div.ui-datepicker{ font-size:7px;}

Aber dadurch wurde die Titelgröße nur kleiner (Monat Jahr). Um die Wochentagsbeschriftungen und Tageszahlen kleiner zu machen, musste ich auch die folgenden zwei Zeilen aus der jquery-ui-1.8.18.custom.css kopieren und in meine Seite einfügen, aber dann musste ich auch die Schriftart hinzufügen -Größenangaben für beide.

.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;}
.ui-datepicker td { border: 0; padding: 1px; }

Also, was ich am Ende hatte, ist folgendes:

<style type="text/css">
div.ui-datepicker{ font-size:7px;}
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size: 1.6em;}
.ui-datepicker td { border: 0; padding: 1px; font-size: 1.6em;}
</style>

Dadurch kann ich die Schriftgröße für Datum und Jahr, Wochentagsbezeichnungen und Datumsnummern steuern.

Question 8

Ich werde Ihnen die Verwendung empfehlen

.ui-datepicker { font-size:10px !important; }

statt zu verwenden

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

weil CSS-Klassenselektoren einen größeren Umfang haben als die Verwendung von Elementselektoren, die nur für bestimmte Elemente gelten. Sie müssen lediglich ein weiteres HTML-Element des Klassentyps erstellen und müssen sich um nichts kümmern.

In Ihrem Problem müssen Sie jedoch nichts tun, sondern nur den Klassenselektor zu Ihrer eigenen CSS-Datei hinzufügen, NICHT zu der für jquery-ui, und Sie sind sortiert, wenn Sie einen weiteren Datepicker erstellen müssen, müssen Sie sich keine Sorgen machen Ändern Sie das CSS erneut auf diese Weise.