Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[colu]

Hallo zusammen,

ich teste gerade die im Popup Anzeigen Funktion und bekomme es leider nicht so hin wie ich mir das vorstelle.

ich habe auf der Startseite drei Info Boxen - Vis 2 - Material-Widgets Schalter oder Knöpfe, die mir den Status von Fenster, Heizung und Rollladen anzeigen je Etage.
Ich möchte, wenn man auf die Box klickt, sich ein Popup öffnet mit der jeweiligen Seite um die Heizungen etc einzeln anzusteuern. Ich hatte gehofft das mit dem Universal Widget von inventwo design einfach umsetzen zu können. Transparent über die Infoboxen legen und es öffnet sich das Popup.

Das klappt auch, aber nur wenn ich nicht im responsive Design arbeite. Sobald ich das aktiviere liegen ja die Popup Flächen nicht mehr richtig.

Gibt es dazu eine bessere Lösung als ich hier gebaut habe? :D

[MCU]

@colu ChatGPT

Ja – das Problem ist bei VIS 2 leider „normal“: Sobald du im Responsive Design bist, ändern sich Position/Größe deiner Info-Boxen dynamisch (Breakpoints, Umbruch, Skalierung). Ein transparentes Overlay (Universal Widget / absolute Position) bleibt aber an seinen „starren“ Koordinaten hängen → dadurch verrutscht die Klickfläche.

Hier sind Lösungen, die in Responsive wirklich sauber funktionieren (ohne rumgefummel mit Overlays):

1) Beste Praxis: Klick direkt auf das Widget / Container (statt Overlay)

Wenn deine Info-Box ein Material-Widget Schalter/Knopf ist:
Nutze dessen OnClick / Action (oder „bei Klick“) und öffne darüber ein Popup.

Idee: Nicht „unsichtbar drüberlegen“, sondern das Element selbst ist der Trigger. Dann bleibt es immer korrekt, egal wie es im Grid umbricht.

Umsetzung (VIS 2 typisch):

Info-Box als Button/Tile/Container bauen

Aktion: Dialog/Popup öffnen

Inhalt des Popups: deine Detailseite (Heizung/Fenster/Rolladen) als View/Seite

(Je nach Widget-Set heißt das z.B. „Open view in dialog“, „Show dialog“, „Popup öffnen“, „View anzeigen“.)

2) Popup als „Dialog mit View“ (statt separate Seite + Navigation)

Viele Sets (Material, Basic, teilweise vis2-core) können:

View in Dialog/Popup anzeigen

Optional: Breite/Höhe relativ (z.B. 90vw / 90vh) → sehr responsive-tauglich

Vorteil: Du musst keine Positionen pflegen, nur „öffnen“ und „schließen“.

3) Wenn du unbedingt überlagern willst: Overlay im selben Container, nicht absolut auf der Seite

Wenn dein Layout über Grid/Flex kommt, dann:

Packe die Info-Box in einen Container

Lege den transparenten Klicklayer innerhalb dieses Containers (position: absolute; inset:0)

Wichtig: der Container selbst muss „position: relative“ sein

Dann skaliert der Overlay mit dem Element, nicht mit der Seite.

Das geht aber nur gut, wenn du die Boxen wirklich sauber in Containern kapselst (und nicht „frei“ auf der Seite rumschwebend).

4) Alternative: „Popup-Trigger“ über State/Boolean + CSS/Bindings

Wenn du es ganz robust willst:

Pro Etage ein Boolean-State (z.B. showHeizungEG)

Klick auf Info-Box setzt State auf true

Popup-Widget ist sichtbar wenn State true

X/Close setzt State false

Vorteil: super stabil, auch wenn du später die Views austauschst oder Animationen einbaust.

Was ich dir konkret empfehlen würde

Mach Variante 1 oder 2: Klick direkt auf die Info-Box → „View im Dialog öffnen“.
Das ist in Responsive am wenigsten anfällig und fühlt sich „native“ an.