Popup for data entry design

So on my page there is a list and for adding items to the list, I want to create a popup which has the input fields, and submit and close button. The popup container has visibility which is toggled by a button.

I am trying to set the width of this popup container to 100% and the height to 80% which will be centred vertically. It will be positioned absolutely and z number is set to 100.

I have two questions:

1.) If I do this, then on the UI canvas this container remains on top of everything else. I can not see or work on anything else on that page

2.) Sometimes, even on setting the height as 100% or say 600 pixels, the container covers only about 25-30% of my screen. Some other component is messing with its functionality. If I copy it to a blank page, it covers the entire screen but not on the page it was designed for. All other components are set to relative position and have a lower z number. Any ideas on what exactly should I check for to resolve this?

Hi,

The problem may be related to the page margins or padding, or as you said, conflicts with other components. It is difficult to say which if we don’t know the exact layout of your page.

One way that this might work is if you create, for the whole page, two containers. First container is relative and contains all non-popup components, and the other is absolute with 100% width and height (you can use viewport.height). Delete all padding the page itself includes, and put those values in the relative non-popup container. Then, in the popup container, set it to have top and bottom padding with 0.1* ...viewport.height (10%). Now, set the background colour to transparent or something with a lower opacity than 100%. Then, add the contents of the popup itself inside another (relatively positioned) container that has 100% width and 0.8 * viewport.height. Make sure to set a background colour. Here’s an example where the absolutely-positioned container has a gray background colour and 60% opacity:

Now, if you want to close the popup by tapping on the dark-grey part, you can use the component tap event of the surrounding container and turn the visibility off.

Hope this helped somewhat, even if it’s not the exact solution you might be looking for.

Thank you… This will work for my use case.

Just one more query, this container stays on top of all other components in the UI canvas unless I change the visibility to a static false. If i don’t do that then i cannot view/edit other components. In the app it won’t be a problem as user clicks a button to open it and clicks one to close it.

Any ideas on how to handle this more elegantly?

There’s some sort of issue where a false preview value in the page variable binding view won’t work until it is selected again. Try opening the visibility and setting the preview value to true and immediately back to false, then save - it should hide the component. Alternatively, just set it to a formula, as that seems to work just fine:

You’ll know it is working if the preview value is not in italic. I’ve notified our team of this issue, the preview value should work the same regardless of the chosen binding method.

1 Like