Hi all, I need to open a popup with system.perspective.openPopup whose components must be differently arranged, depending on the device the operator is using (PC or Smartphone). The root container of the view I use for the popup is therefore a breakpoint container, where I've embedded my 2 different views.
Unfortunately that arrangement does not seem to work, i.e. the device does not matter and the poopu shows always the view which I configured as Large in the breakpoint container children configuration.
Any suggestion?
Fill in the 4 positions: top, bottom, left and right this will set the initial margin of the popup to the screen, and will disable the normal sizing behavior allowing the popup to scale on your phone
if that turns out to be to big for your big screen you can give the popup a max-width/height
with the stylesheet. change yourPopupId accordingly to your popup identifier
#popup-yourPopupId{
max-width: 800px;
max-height: 800px;
}
1 Like
Very cool trick! Any way to retain opening up center of view?
By hard-coding the distance from each edge as the same value the Popup is defined as being centered. If you're talking about the content of the Popup, then not unless you're using a Coordinate Container in a percent layout and your content is manually placed as "centered".
I'll check for a typo, but when I set 15 to (Top,Left,Bottom,Right) the popup will appear in the top left corner of the desktop. On mobile it stays at the top instead of center of screen height.
However, this trick is helping the components within the popup to scale in the client just like they do in the designer.
hm it does seem that applying a max-height/width does stop it from being centered. adding in margin:auto should fix that.
idk how this will interact with draggable/sizable tho so test it out
#popup-yourPopupId{
max-width: 800px;
max-height: 800px;
margin:auto;
}
My post was base don only applying positional properties through the configuration, and NOT any dimensional properties through theming/styling.
When you apply (what I consider to be) "positional" arguments, top and left have a higher priority than most other properties - even outside of the positional category. So top and left get applied, then bottom and right. Then, you've specified that the Popup should only be 800px wide and 800px tall. Well, we've specified the top and left as absolute values, so the final shape will be based off of those, and the bottom/right settings will be overruled by these "max" settings.
If you supply ONLY the positional properties (top, left, right, bottom), then your popup will be centered and will span the entire Page up to whatever distance from the edge you have specified for these settings. This doesn't mean your content is centered - only the Popup.
If you supply ONLY the max- settings, your Popup will be centered within the Page with whatever dimensional settings you've applied. Again, this is the Popup - not the content of the Popup.
To center your content regardless of Popup settings, you must either
- use a Coordinate Container in
fixedmode where the positional (x,y) AND dimensional (width,height) settings are percent values - Use a Coordinate Container in percent mode.
- Use a Flex Container where the
item-alignsetting is is set to "center".
2 Likes
Thank you and sorry for the confusion. I added margin: auto per @victordcq and this recentered the popup on screen. The contents of the popup are fine.
Hopefully to not miss the issue of @pgmo 's original post, I'll share photos to illustrate the problem and how @victordcq 's work-around is helping.
Designer - works as expected (No breakpoint container, all flexes)
Issue
Basic Popup Settings
The client does not allow the popup contents to scale like we want.
Current fix
Adjust Popup Settings
Add @victordcq 's CSS recommendation to stylesheet.css
Working in Client
1 Like
