Popup Modal Issues

Ask us anything
1

Has there been any reports of bugs on popup modals? The issue I’m having, I have a table setup and when I click edit on a row in the table the modal opens fine on the first two clicks. On the third click the modal either opens in a different location on the screen or the overlay is broken. On the fourth click the modal opens and zooms in and out repeatedly. This just started yesterday and I haven’t changed anything referencing these modals. Also, it’s happening on any modal I open on any table so it isn’t just a setting on one table that’s off. Anyone else getting this?

2

Same here since our latest publish. Modals open fine at first, then appear top-aligned or left-aligned instead of centered, sometimes with a broken overlay. Popup settings are Side: Center / Align: Center, no changes on our side.

What we found in the published app (Chrome):

  • The inner layer .ww-dialog > .ww-layout.content.-modal gets the correct inline vars (--align-items: center; --justify-content: center), and the runtime rule .content.-modal { align-items: var(--align-items); justify-content: var(--justify-content); flex-direction: column } is applied.
  • But the popup root’s own layout style is propagated to that layer via data-ww-ls (e.g. .ww-e-XXXX [data-ww-ls~="XXXX"] { display:flex; flex-flow:column; align-items:flex-start; row-gap:1em } from ww-style-shared-*.css).
  • That rule lives in @layer ww-style-library, the centering rule in @layer ww-style-component. Since library comes later in the layer order, it wins regardless of specificity → align-items: flex-start → modal sticks to the left/top.
  • We also see ww-style-shared-*.css (plus font/inline sheets) injected again and again — several copies in the document after a few popups were opened. That would match “works the first times, breaks later”.

Workaround that restores the popup’s own Side/Align settings (App settings → Custom code → Head):

.ww-dialog .ww-layout.content.-modal { align-items: var(--align-items) !important; justify-content: var(--justify-content) !important; }

Would be great if the WeWeb team could confirm and fix it in the runtime.