Perspective popup screen not responsive based on screen resolution

Hello team,
Currently I am working on a screen under perspective module. Scenario is I want to display pop-up screen when user click on a button.

The pop-up screen resolution works fine in pc/laptop/tab but when it comes to mobile view the pop-up screen is not responsive.
PC/LAPTOP/TAB:

MOBILE VIEW not responsive:
image

**Things done to solve the responsiveness issue: **

  1. In the Configure Popup Action [i had checked on VIEWPORT BOUND option] but option works up to certain extent...when your popup screen content is more, the viewport bound option fails.
    [screenshot]:

  2. Create 2 pages to be called with in Pop up with same content but different size.
    a. one popup page dedicated to PC/LAPTOP/TAB view

and another one for Mobile screens.

[Here i am confused how to call the popup's based-on screen resolution] Mobile/Laptop.
....................................................................................................................................................
Is there any other methods to solve this issue?

1 Like

You should design the View being used in the Popup so that it is responsive to the environment, instead of trying to program which View to use based on the environment.

The issue you're encountering stems from your use of what appears to either be a Coordinate Container or a Flex Container (where you've seemingly removed all of the flex-iness). Coordinate Containers in fixed mode are NOT responsive - they are designed to always apply static "coordinate" locations for all components. If you're using a Flex Container, it seems you've removed the ability to wrap and/or locked down the ability to grow or shrink components.

So you need to redesign the Popup View. I personally recommend using Breakpoint containers anytime you know a View will be used on both workstations and mobile devices. This allows you to specify one layout for workstations, and a different layout for mobile devices -- even allowing for components to be removed on mobile to reduce clutter.

I only ever recommend using Coordinate Containers if you're trying to position Pipes and/or symbols, or if you're trying to overlay components on top of one another. All other use-cases are better served by Flex Containers 99% of the time.

3 Likes

Thanks @cmallonee for the info...
However, I have utilized those ways as well.

image
embd_large - when screen-size is >=400 [pc/laptop/tab]
embd_small - when screen-size is <400 [mobile]

Breakpoint or flex-container wrapping works only when the view is called as navigation[page]
{screenshot}

-> But when the same page is called via pop-up the page is not responsive.
{screenshot}

This issue only happens when the page[view] is called via pop-up.

1 Like

Right, so the problem here with the Breakpoint layout stems from the fact that the Popup doesn't know how big to render, and we're also telling it that it can't be too big (viewport-bound). Since you're not defining any dimensions for the Popup, it will try to render at default dimensions. These default dimensions you defined within your View probably fall within the "large" breakpoint (>400px). So the Popup renders the internal View at those dimensions, but then is Viewport Bound, so the Popup restricts its own dimensions to stay within the viewport.

This is an unfortunate situation where you will need to use scripting to open this Popup so that you can dynamically define the Popup dimensions.

The following code checks against the width of the viewport in order to determine the dimensions at which we should open the Popup - specifically, the width. If the width of the viewport is greater than 600px, than we don't need to define any positional properties, otherwise we only want our width to be 399. We do still want the Popup to be bound by the viewport, so we also include that kwarg.

viewport_width = self.page.props.dimensions.viewport.width
position = {} if viewport_width > 600 else {"width":399}
system.perspective.openPopup(id="X", view="View", position=position, viewportBound=True)

The main points to take away from this are:

  1. you were not defining dimensions for the Popup, so it was always trying to render at its default dimensions, and those default dimensions are bigger than your small breakpoint.
  2. Breakpoints don't care about the width of the page - they care about the width of the container.
1 Like

Pretty sure this should work here too. setting the internal width of the popupview to auto or maybe to 100% should fit it to the popups borders.

1 Like