Modal Popup Position Percents

Community Usage questions
1

I’m in the process of converting templates from pixels to percents. I have a weird problem or perhaps misunderstanding of how it’s working with modal popups.

If a screen size the template was created on was 1920x1080. I take into fact the size of the TAB in pixels so my new measurements of everything below is 1917x1037. For each button inside the overall panel/work area I apply the following:

Pixels = Pixel of the button property
Left/Width = 100(Pixels/1917)
Height/Top = 100(Pixels/1037)

This worked perfectly for everything under the main panel/work area. If there was a separate panel inside another panel, then the math would have to adjust accordingly to the parent panel size etc etc.

Now the question is the modal popups aren’t following the same rules. I’m not sure what screen size they are being written under since the math doesn’t work anymore. No matter what percent values I list for the modal it appears in a completely different position on any one of my different sized screen tablets. Can you not give modals a percent value to keep them in the desired position based off the screen size?

2

The modal’s popup geometry is defined the following properties popupWidth, popupHeight, popupLeft and popupTop, they seem to work fine with percents. Can you provide an example that doesn’t behave properly ?

3

Here is an example stripped from the working template. Maybe I’m misunderstanding how the percents work. Shouldn’t the percents be responsive to the active screen size?

pop_up percent for jean example.json (1.7 KB)

On a tablet with 1080p the percents work fine and the modal popup is in the same position. On one of my tablets that has a 720p the modal button is positioned the same but the modal popup goes off the screen. Is this just the function or is something not working right?
Editor view which looks the same on my 1080p tablet

image
image.png1903×1022 62.3 KB

Goes off screen on 720p tablet?
image
image.png1380×780 25.6 KB

Here is the 1080p tablet
image
image.png1530×1013 41.8 KB

4

Thanks, there is a problem indeed: popupTop percents depend on the total width instead of the total height, i’ll fix it soon.

1 Like
5

Meanwhile, you can fix it by adding this to the modal’s css:

.popup-wrapper {
  margin-top:auto;
  top: var(--top);
}
1 Like
6

Thanks @jean-emmanuel!

That’s working great for me in the meantime. :smiley: