Dialog mittels CSS umgestalten non-resizeable machen

[Marco.K]

Hallo zusammen!

Ich bin gerade dabei Dialoge zu erstellen und stolpere da über ein paar Sachen.

Auf meiner Hauptseite gibt es einen Button (ID: w00054) der eine gespeicherte View in einen Dialog öffnet.

Der Dialog hat einen transparenten Hintergrund, der Dialog idR. einen weißen Hintegrund, mittels CSS habe ich dem Dialog auch einen transparenten Hintergrund gegeben.

.ui-dialog[aria-describedby="w00054_dialog"] {
   background-color: #00000000;
   border: none;
}

.ui-dialog[aria-describedby="w00054_dialog"] .ui-dialog-titlebar {
    display: none;
}

Das ausblenden der Titelleiste habe ich ebenfalls per CSS machen müssen da sonst der Schließen-Knopf stehen blieb.

Wie ihr in dem Bild sehen könnt bleibt aber noch im unteren Bereich des Dialogs ein weißer Balken stehen, dieser lässt sich mit den Resize-Handlern auch bewegen.

Ich habe nach mehreren Stunden noch nicht heraus gefunden wo der Balken herkommt und wie ich ihn weg bekomme. Mittels Firefox-Debugger komme ich da nicht weiter.

Hat da von euch jemand eine Idee?

Eine weitere Sache die mich ein wenig stört sind die Resizeable-Handler diese würde ich gerne entsorgen, allerdings wehren diese sich gegen folgendes CSS:

.ui-dialog[aria-describedby="w00054_dialog"] .ui-resizable-handle {
    display: none;
}

Eigentlich sollten die Handler dann nicht mehr angezeigt werden, stattdessen werden dem DIV-Containern plötzlich display: block mitgegben und übersteueren somit mein CSS. :shock:

Ich hoffe ihr könnt mir helfen.

Gruß - Marco

[Uhula]

Per CSS kannst du Element-Style-Eigenschaften normalerweise nicht überschreiben. Die sind stärker. Allerdings gibt es eine Lösung, wie es doch geht. Man hängt an die CSS Anweisung ein !important an - dann hebt man die Anweisung auf eine neue Stufe, die über allen ohne !important Angabe steht.

Versuch mal:

.ui-dialog[aria-describedby="w00054_dialog"] .ui-resizable-handle {

display: none !important;

}

[Marco.K]

Danke das hat geklappt, die Resize-handler werden nicht mehr angezeigt.

Der weiße Bereich ist aber immer noch da.

[Lumpenhund]

Moin,

falls es noch irgendwie aktuell ist. Die Lösung ist relativ einfach. Ich habe es bei mir auf alle Dialoge angewandt, daher fehlt die Widget Zuordnung.

Nachteil dabei er wendet es auch auf die Dialoge im vis Editor an ;/ Aber egal!

.ui-dialog{
   background: transparent !important;
   border: none !important;
}
.ui-dialog .ui-dialog-titlebar {
    display: none !important;
}
.ui-dialog .ui-resizable-handle {
    display: none !important;
}

Anstelle background-color einfach nur background benutzen

Grüße

Lumpe

[nousefor82]

Hallo,

Lumpenhund, vielen Dank für den Code.

Kann mir vielleicht noch jmd. verraten wie man die Farbe der Buttons innerhalb des Dialoges (z.B.: im Dimmer Widget) ändern kann?

Vielen Dank!