Monatsrückblick Januar/Februar 2026 ist online!

[klaus88]

Hallo,
Ich verwende ziemlich häufig Dialoge bzw. Popups in meiner Darstellung und möchte dafür keine Ränder in den Popups.
Ich habe nun einen Weg gefunden dies per CSS einzustellen:

.ui-dialog[aria-describedby="w00090_dialog"] {
    background: transparent !important;
    border: none !important;
}

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

Aber wie ihr sehen könnt, schaffe ich es "nur" für das spezielle Widget dieses CSS anzuwenden (Hier in diesem Beispiel W00090.
Wie kann ich einen allgemeinen CSS Eintrag erstellen, den ich dann im Widget unter Generell CSS Klasse eintragen kann und das Popup (Dialog) so dargestellt werden kann.

Danke für eure Hilfe
Klaus

[Jey Cee]

@klaus88 Kannst du mal den html code dazu zeigen.

[klaus88]

@Jey-Cee Hallo Hilf mir mal schnell - meinst du das Widget bzw. den Code vom Widget oder welchen HTML Code meinst du?

[Jey Cee]

@klaus88 öffne dein Vis in der Ansicht und mach einen rechts Klick auf den geöffneten Dialog. In Chrome siehst du dann ganz unten "Untersuchen" bei Firefox heist das Ähnlich.
Dann öffnet sich die Console und du siehst den Quellcode des Dialogs.

[klaus88]

@Jey-Cee Hoffe das passt so:

popup.txt

DANKE FÜR DEINE HILFE!

[Jey Cee]

@klaus88 das war es irgendwie nicht, konnte das widget nicht finden, egal. In der Annahme das du html Dialog verwendest, sollte

.ui-dialog {
   border: none!important;
}

oder

.ui-widget-content {
  border: none;
}

funktionieren.
Du kannst direkt die CSS Klasse ansprechen wenn du es Global haben willst, dann wird alles mit dieser Klasse so dargestellt.

[klaus88]

@Jey-Cee DANKE - manche Dinge sind so einfach, dass man nicht draufkommt !

Habe jetzt deinen Tipp herangezogen und folgenden Code unter Global gestellt und es passt:

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

Danke für deine Hilfe!

(UPDATE) Nachteil dieser Lösung: Es werden auch die Dialoge im Editor anders dargestellt !

[FredF]

@klaus88 sagte in [Gelöst] Bitte um Tipp eines CSS Profis:

(UPDATE) Nachteil dieser Lösung: Es werden auch die Dialoge im Editor anders dargestellt !

Das wird das Problem sein:

und folgenden Code unter Global gestellt

Vielleicht besser im Projekt einstellen

[klaus88]

@FredF Hallo
Dachte ich auch und stellte es unter Projekt - aber witzigerweise ist dieses Verhalten auch im Editor wenn ich es unter Projekt stelle. Im Matrial Design haben sie schon ein CSS eigeführt, welches nur in der Runtime aktiv ist - dort würde es gehen! Muss ich halt irgendwann auf Material Design umschalten.