Strange behavior in isolation mode

Hi everyone,

is it some kind of a bug or do I make something wrong?

I’m designing a popup in isolation mode that is supposed to be opening when the button is clicked on the main page. The pop-up container’s z-index is set to 1000, while the page container has a z-index of 1.

The isolation mode looks strange (part of the container is covered by striped background), and the dimensions are completely different from what I get in the preview app.

Also, I noticed that controls in the popup (drop-down list, for example) that overlap with controls in the page itself do not work (when I tap the dropdown, a button under it is triggered instead).

Any ideas on what’s going on here? Maybe there’s some guides on how to build popups (modals) in AG? I checked some posts in the forum, but they do not seem to be enough.

Many thanks!

PS I’m also not sure why the main page content (blue button and other stuff below) is visible in isolation mode. They are definitely not a part of the popup that I’m editing.

Hi!

Position: absolute is tricky on a good day :slight_smile: You need to set each of the containers in between the page and the position:absolute container to have a z-index. Not sure if having a full-page modal will work from within a component like this, but… Maybe? We have been talking about needing some more customizable way to show light modals/dialogs etc., but that’s still in the talks.

I also noticed you’re editing the component in light isolation mode instead of template editor (old isolation mode or full isolation mode), if you are making a custom component you should probably be editing it in the latter. This editor mode is not opened with double click but via the editor icon under properties. Before going there, move your changes over from light isolation mode by pressing the overwrite button.

Isolation mode is definitely not compatible with working on things that are fully position:absolute though, I’ll look into creating a ticket for that.

Hi!

Something that I just figured out – the defaults for container changed, previously it automatically overflowed and now the default is “no overflow”. Set the container to overflow and it should work better :slight_smile: