wake-up-neo.com

jQuery UI Theme zu groß

Was muss ich beim Herunterladen eines jQuery-ui-Themas hinzufügen, damit die Standardeinstellungen so aussehen wie auf der jQuery-ui-Demoseite?

Der Dialog, den ich sofort sehe, ist RIESIG (siehe unten). Ich weiß, dass das gesamte CSS auf der Demoseite für mich verfügbar ist, aber ich bin kein CSS-Experte und weiß nicht, was ich nehmen und was ich lassen soll.

enter image description here

EDIT

Hier ist ein jsFiddle-Link , der dasselbe anzeigt.

EDIT

25
Adam Rackis

Ich sehe, worum es geht: P

body{font-size:10px;}

Die Größen sind relativ zur Seite (eher ein fließendes Layout). Das Ändern der Schriftgröße des Körpers (zumindest in der Geige) behebt dies. Ändern Sie einfach die Schriftgröße Ihrer Seiten und der Dialog ändert sich mit.

http://jsfiddle.net/hnBmC/

27
Joseph Marikle

Der beste Weg ist: Ändere die Schriftgröße von jQuery-ui:

.ui-widget{font-size:12px;}

Siehe diese Geige für ein Beispiel.

41
undefined

Bei diesem Problem mit der Kopfzeile des Dialogfelds können Sie der übergeordneten Klasse des Dialogfelds einfach das folgende Attribut hinzufügen

.ui-dialog { clear: both; }

Als Referenz jQuery UI Dialog Titelleiste zu hoch

1
Soundar

Wenn Sie sich themeroller.css mit Ihrem bevorzugten Webseiteninspektor ansehen, finden Sie Folgendes:

#themeroller {
    font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
    font-size: 12px;
}

Ein bisschen im HTML-Code zu graben, zeigt, dass <div id="themeroller"> den gesamten "Demo" -Bereich der Seite einschließt, sodass ALLE jquery-ui-Widgets darin sind und daher ihre Schriftgröße relativ zu diesen Werten annehmen.

Auf meiner "zu großen" Seite hat normaler Text eine Schriftgröße von 18px. Dies kommt von .ui-widget in themes/ui-darkness/jquery-ui.css mit font-size: 1em, den es aus der Basisschriftgröße meines Browsers von 16px berechnet. Diese Grundgröße habe ich anhand eines einfachen Dokuments ermittelt:

<html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>

Die Antwort auf die Frage, wie die Schriftgröße für jquery-ui-Widgets festgelegt werden soll, besteht darin, die Schriftgröße für ein umschließendes Element festzulegen. <body> (wie von Joseph Marikle empfohlen) trifft garantiert alles, ist aber möglicherweise zu breit für Ihre Anforderungen. In diesem Fall sollten Sie stattdessen einen inneren <div> verwenden. <span> ist wahrscheinlich böse, weil Sie Dinge auf Blockebene nicht in Nicht-Blöcke umschließen sollten - aber überprüfen Sie diese Behauptung mit der CSS Style Police, ich bin nur ein Hacker!

Ich wollte mich darüber austauschen, warum sich die Designer für em entschieden haben, was ein width ist, und nicht ex, was ein height ist. Ich vermute jedoch, dass die Antwort darin besteht, dass em über einen größeren Bereich von Schriftarten konsistentere Ergebnisse liefert, da die Höhe eines 'l' in den meisten Fällen ungefähr der Breite eines 'm' entspricht. Umgekehrt, wenn Sie 2ex als Grundkennzahl verwenden, erhalten Sie seltsame Höhen in Schriften mit sehr kurzen oder sehr langen Auf- und Abwärtspfeilen im Vergleich zur Höhe eines 'x'.

1
kbro

mit dieser CSS-Regel können Sie kleinere Schriftgrößen anwenden:

.ui-dialog{font-size: 62.5%;}

0
ARIJIT

jquery ui ist ein Framework, das Sie ändern können, indem Sie ein neues oder vorhandenes Thema erstellen:

/*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 1em 0.3em;
    position: relative;
}
0
cetver