Popup view in mobile phone

Ignition
1

"I have created a popup view inside a breakpoint container, but when I try to open that popup on a mobile device, I have to resize it to fit my mobile screen. Is there some setting I need to enable? I have already enabled the viewport bound."

1 Like
2

Adding this to the stylesheet this seems to work. You’ll need to play with it and check it more thoroughly than I have and see if it break anything…

.popup-body > .view {
	min-width: 0vw !important;
	max-width: 95vw !important;
}

you’ll need to do something similar for the height

Dynamic Size for popup
3

I am working on creating an animation for desktop, and I would like it to function in such a way that it opens a large view for desktop and a small view for mobile phones. Additionally, this behavior should be applied to a single popup.

Could you please assist me in implementing this functionality? Any guidance or suggestions would be greatly appreciated.

4

You can use media queries to set the width and view of your popup.

Something like

@media (max-width: 768px) {
  .ia_popup[id^=popup] {
    width: min(92vw, 520px);
    height: min(80dvh, 420px);
  }
}
5

On general terms, i use an 'custom prop' for perspective View, called ‘movil’ (yes, im spanish speaker)

Binding:

if(
{page.props.dimensions.viewport.width} <= 1000,
1,
0
)

with this, i know when i’ve large screen, or mobile screen.

6

Targeting this parent won't resize the popup content, only the parent popup container and you’ll be left with the contents being cropped, so you need to target the view inside.

But I don't know if you need the media query either. The min/max size overrides already do everything for you to ensure the popup doesn’t get sized larger than the screen

@arpit_yadav did you try adding the css rule in my post into the advanced stylesheet?

The breakpoint container should still switch out the views based on the viewport screen size to go between a mobile and pc version

1 Like
7

Yes, adding the CSS rule to the advanced stylesheet worked, thank you. However, will this rule now be applied to all of my popups?

Ideally, I would like this behavior only when the popup is opened in the mobile app, while on desktop I still want the popup to open at maximum width and height. Is there a way to scope this CSS so that it only affects mobile popups, or to have different sizing for mobile and desktop?

Thanks again for your help.

8

The popups on desktop will still open at the size you specify when opening it. The max/min values affect the max and min sizes that the popup can be which are in % units of the screen. e.g. 95% of the width. So if it’s attempted to be opened at 1200px wide but the screen is only 900px, then it will actually open at 95% of 900px wide, not 1200px. Not sure if that answers your question?