webentwicklung-frage-antwort-db.com.de

der Kalender der jQuery-Benutzeroberfläche wird zu groß angezeigt. Möchten Sie die Demo-Größe?

Daher habe ich eine benutzerdefinierte Benutzeroberfläche für jQuery heruntergeladen und meiner Site das Kalendersteuerelement hinzugefügt (Beispiel: Linktext ). In dem Beispiel wird die gewünschte Größe angezeigt, aber auf meiner Webseite ist sie ungefähr doppelt so groß. Warum???

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

Ich denke, das ist der Code, den jQuery UI hat, 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

35
Phill Pafford

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

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

Funktioniert hervorragend, wenn jemand anderes so etwas braucht

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

Das ist die Lösung, aber was ich nicht wusste, ist, wenn Sie es wie folgt 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 Einstellungen , so dass Sie die von Google gehostete css weiterhin laden können, aber dies verwenden, um sie zu überschreiben =)

9
gideon

Um die Größe des Kalendersteuerelements festzulegen, ändern Sie dies:

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

zu diesem:

.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

8
Shekhar Agarwal

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

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

nach dem Aufruf zum Laden von CSS-Dateien für die jQuery-Benutzeroberfläche.

Alle jQuery-UI-Komponenten sind Widgets und erben auf der obersten Ebene den .ui-widget-Stil.

5
Harish

Verwenden Sie den CSS-Zoom

.ui-widget{ 
    -ms-transform: translate(-15%,-15%) scale(0.7);//translate must be before scale
    -moz-transform: translate(-15%,-15%) scale(0.7);
    -webkit-transform: translate(-15%,-15%) scale(0.7);
    transform: translate(-15%,-15%) scale(0.7);
}

Im obigen Code habe ich "sclale (0.7)" verwendet, was bedeutet, dass die neue Breite und Höhe 70% der ursprünglichen Werte beträgt. Das Element nach der Transformation hat den gleichen Mittelpunkt des ursprünglichen Elements, wodurch die Breite um 30% reduziert wird, dh 15% von links und 15% von rechts, das gleiche für die Höhe. Wir müssen also translate verwenden, um das neue Element nach links oben zu verschieben. "translate" muss vor "scale" liegen, so dass "15%" 15% der ursprünglichen Breite ist (d. h. bevor wir skalieren) und nicht nach der Transformation die neue Breite hat.

 enter image description here

1
Billel Hacaine

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

Vielleicht erlaubt Ihnen die Partei, die CSS nicht zu berühren, die Freiheit innerhalb eines Containers? Das heißt, 

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

Wenn nicht, haben Sie anscheinend die Kontrolle über die JS. Damit sollten Sie Inline-Styles schreiben können.

BEARBEITEN

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

1
steamer25

Ich werde es Ihnen empfehlen 

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

anstatt zu verwenden 

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

weil CSS-Klassenselektoren einen breiteren Anwendungsbereich haben als Elementselektoren, die nur für bestimmte Elemente gelten. Alles, was Sie tun müssen, ist, ein weiteres HTML-Element des Klassentyps zu erstellen, und Sie müssen sich um nichts kümmern. 

In Ihrem Problem müssen Sie jedoch nichts tun, fügen Sie einfach den Klassenselektor zu Ihrer eigenen CSS-Datei hinzu, NICHT für jquery-ui, und Sie werden sortiert. Wenn Sie einen anderen Datepicker erstellen müssen, müssen Sie sich keine Sorgen machen Ändern Sie die CSS erneut auf diese Weise.

1
A Malik

Um meinen Kalender zu verkleinern, musste ich einige Änderungen an der CSS vornehmen.
Wie einige andere Personen bereits erwähnt haben, habe ich die folgende Zeile zu einem Style-Tag auf meiner Seite hinzugefügt.

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

Dies machte jedoch nur die Titelgröße kleiner (Monatjahr). Um die Wochentagsbeschriftungen und Tagesnummern zu verkleinern, musste ich auch die folgenden zwei Zeilen aus der Datei jquery-ui-1.8.18.custom.css kopieren und in meine Seite einfügen. Dann musste ich jedoch auch die Schriftart hinzufügen -Größe für beide.

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

So endete ich mit folgendem:

<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.

1
Vincent

Vergewissern Sie sich, dass auf Ihrer Seite keine CSS-Konflikte vorhanden sind, z. B. Einstellungen für HTML/Body oder Container-Schriftgröße, die in den Kalender übergehen.

0
ScottE

Welche Größe Sie möchten, können Sie durch Bearbeiten dieser Zeile in css festlegen.

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

geben Sie einfach eine andere Schriftgröße wie .5em oder .8em an

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

Es wird funktionieren, ich habe es nicht.

Ich bin gerade zufällig darüber gestolpert, aber versuchen Sie, die DOCTYPE-HTML-Datei Ihrem Dokument hinzuzufügen

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

vor dem Öffnen des HTML-Tags.

0
Michael

Das ist einfach: Jquery-ui erledigt seine Arbeit einfach im Objektstil. Ich meine :

<html>
   <body
     <input type="text" id="date"/>
     <script type="text/javascript"> $("#date").datepicker()</script>
   </body>
</html>

Die Größe der Datumsnummer und des Mondnamens wird in Abhängigkeit von der folgenden Einstellung festgelegt: $ ("# date"). Css ("font-size"). Wenn die Eingabe also 6px als Schriftgröße hat, sieht datepicker klein aus. Wenn die Schriftgröße 42pt beträgt, ist dies eine Datumsauswahl für Blinde!

0
N Joly