**Things done to solve the responsiveness issue: **
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]:
[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?
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.
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:
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.
Breakpoints don't care about the width of the page - they care about the width of the container.
I'm using this "solution" for my tablet's application. When the person open the pop up using the tablet on the vertical position opens the screen "x", otherwise opens the screen "y".
But the problem is that don't resolve if the person turns the tablet into a new position while the pop-up is already on screen.
Correct. Once the Popup is configured and opened, changing the screen dimensions and/or resizing the Popup don't result in a re-configuration of the Popup; it will retain the original configuration until closed and re-opened.
its hard to make something movable/reziable, that also is responsible at run time. because which is right, the user resizing, or the browser?
in this case perspective says the user
