# Perspective Breakpoint Container in a popup **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [January 24, 2023, 12:23pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962 "2023-01-24T12:23:25Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\ **Post date:** [January 24, 2023, 12:23pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/1 "2023-01-24T12:23:25Z")
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? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [January 24, 2023, 12:54pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/2 "2023-01-24T12:54:06Z")
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 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/134dd4ffbc38257c044da306a223c9c02984a237.png) 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 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/d/ad03b3fe13ba1b4104fa718a964b364527006443.png) ```auto #popup-yourPopupId{ max-width: 800px; max-height: 800px; } ``` ---
**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\ **Post date:** [July 20, 2023, 5:51pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/3 "2023-07-20T17:51:59Z")
Very cool trick! Any way to retain opening up center of view? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [July 20, 2023, 6:21pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/4 "2023-07-20T18:21:11Z")
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". ---
**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\ **Post date:** [July 20, 2023, 9:26pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/5 "2023-07-20T21:26:31Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 24, 2023, 6:43am UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/6 "2023-07-24T06:43:25Z")
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; } ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [July 24, 2023, 2:42pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/7 "2023-07-24T14:42:56Z")
> [@wbaker](#): > > 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. 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 1. use a Coordinate Container in `fixed` mode where the positional (`x`, `y`) AND dimensional (`width`, `height`) settings are percent values 2. Use a Coordinate Container in percent mode. 3. Use a Flex Container where the `item-align` setting is is set to "center". ---
**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\ **Post date:** [July 25, 2023, 6:46pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/8 "2023-07-25T18:46:12Z")
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) ![2023-07-25_13-06-43](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8ca92fcea5e96e4d41fcf78e17263ef1b5fad16a.gif) **Issue** Basic Popup Settings ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b513a07c39894e75596c8724b955cb853867dce8.png) The client does not allow the popup contents to scale like we want. ![2023-07-25_13-10-32](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/3442dbac225a24f5199522d72268686b82d50c63.gif) **Current fix** Adjust Popup Settings ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a5d6385aead63a5fb6e66679a44a34961d761482.png) Add @victordcq 's CSS recommendation to stylesheet.css ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0951fa950cee67444dca0c1a47991eea7c653a5.png) Working in Client ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/daa9372a5c6ce2ef2c60597e339fafa995ea6b94.png) ![2023-07-25_13-41-11](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/f/0f59bb55e85088f34bd1c0048ca62a9f7ce447f2.gif) ---
**Author:** ![wbaker](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wbaker/32/85315_2.png) [@wbaker](https://forum.inductiveautomation.com/u/wbaker)\ **Post date:** [December 14, 2023, 4:06pm UTC](https://forum.inductiveautomation.com/t/perspective-breakpoint-container-in-a-popup/68962/9 "2023-12-14T16:06:45Z")
Wanted to follow up and share that the stylesheet.css isn't required. Including the desired width and height on the popup action will provide the same results. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/31da06f61635d63223583c1829fb63c5c0387987.png)