# Perspective Popup runtime resize behavior

**URL:** <https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [March 9, 2022, 9:42am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007 "2022-03-09T09:42:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [March 9, 2022, 9:42am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/1 "2022-03-09T09:42:05Z")

</div>

I would like to open a popup view and resize it while it is open if the user clicks on a button.  
When the popup is open and not moved (from the position it was open on) the enlargement of the popup works perfectly fine, meaning it resizes to the new dimension and with a close button it will shrink down to the original size.  
The problem occurs when I drag/move the pop up from the position it was opened at and then try to resize it .  
The following is the original sized popup

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/803e2b13e769a5ecb445845ec1db92a28497e421.png)  
this is how it looks when it is resized (without moving)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0b2eb6cb5af6d2f3d77dda19a8aef3dcec82ab9.png)  
The slighets movement of the popup will result in the following behavior  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7bc63292e6517ef3037a9e2171118a538c00d8e3.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c429110f4a3a3750f2992c17016f3f74224a90dd.png)  
the following behavior happens when I open, resize , move and shrink it with the close button, i.e. the pop up doesnt shrink back to the original size.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/de2d9e5c217330142e7b39eaa1b49972418be059.png)

Resizing is done by setting the view.props.defaultsize.width  
Summary: the resizing behavior is different when the popup has been moved from the opened position or not.  
Any suggestions or help is appreciated .

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 9, 2022, 11:07am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/2 "2022-03-09T11:07:15Z")

</div>

That looks like a nice under-stated GUI!

It might matter what type of container you’ve used for the popup. e.g. Is it a coordinate, column, or what?  
Can you post your code for the resize? (Use the `</>` code formatting button to preserve indents and apply syntax highlighting.)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 9, 2022, 1:02pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/3 "2022-03-09T13:02:49Z")

</div>

Also what version are you using? There have been a bunch of updates on the state of popups in 8.12 - 8.13 (related to a bug in moving the popup and its view params. So im guessing it might also have affects view.props)

---

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [March 9, 2022, 2:29pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/4 "2022-03-09T14:29:16Z")

</div>

The Popup is a row flex container . it has two more flex containers inside , one for the normal size content and one for the eventual additional information with basis = 0px  
The version in use is 8.1.14  
code on the button that extends the popup is :

```auto
messageType = 'FacePlateExtend'
payload = {"Area":self.view.custom.AreaName,"Unit":self.view.custom.UnitName,"Phase":self.view.custom.PhaseName,"Path":"TPM/Phases/Condition/STD_Conditions"}
system.perspective.sendMessage(messageType, payload, scope = 'page')

```

The message handler on the popup 's root container is :

```auto
	
	if (payload['Area'] == self.view.params.Area) and (payload['Unit'] == self.view.params.Unit): 
		self.view.props.defaultSize.width = 660
		self.getChild("FlexExtended").position.display = True
		self.getChild("FlexExtended").getChild("EmbeddedView").props.path = payload['Path']
		self.getChild("FlexExtended").getChild("EmbeddedView").props.params.Area = payload['Area']
		self.getChild("FlexExtended").getChild("EmbeddedView").props.params.Unit = payload['Unit']
		self.getChild("FlexExtended").getChild("EmbeddedView").props.params.Phase = payload['Phase']

```

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 9, 2022, 2:31pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/5 "2022-03-09T14:31:48Z")

</div>

> [@mahsasalimi](#):
>
> it has two more flex containers inside , one for the normal size content and one for the eventual additional information with basis = 0px

Isn't this the exact purpose of a Breakpoint Container?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 9, 2022, 2:47pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/6 "2022-03-09T14:47:10Z")

</div>

> [@mahsasalimi](#):
>
> `self.view.props.defaultSize.width = 660`

It seems that the moment you resize or move the popup, ignition assigns a width and height to the element above the popup view.  
I dont think there is going to be anything you can do (without javascript) to prevent this.

You could target the popup specificly with a css to unset the width and height.  
Resizing with the mouse wont work anymore but dragging still works

```python
#popup-YourPopupId {
    width: auto !important;
    height: auto !important;
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/db9e8b672bc6f8fb51b334b347acc2103c5ddcfb.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/02e8a748d2b566b05a9fa69965cd02493973dada.png)

---

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [March 10, 2022, 8:36am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/7 "2022-03-10T08:36:09Z")

</div>

I dont think so. I am not changing the screen size.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 10, 2022, 1:01pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/8 "2022-03-10T13:01:14Z")

</div>

Which child container is displayed is based off of the width of the viewport (container size) not the screen size. So a “nested” breakpoint container will still function, independent of the screen size.

You are wanting to show different components based on the width of the view, that is what a breakpoint container is for.

May not matter, but I thought it might work around your issue?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 10, 2022, 1:14pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/9 "2022-03-10T13:14:08Z")

</div>

The container doesnt matter, igntion changes the element above it.

> [@victordcq](#):
>
> It seems that the moment you resize or move the popup, ignition assigns a width and height to the **element above** the popup view.

im pretty sure my solution is the only thing that will work with this settup, where a button tries to adjust the size of an already open popup, without going into making a module.

---

<div class="post-metadata">

**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:** [March 10, 2022, 5:09pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/10 "2022-03-10T17:09:16Z")

</div>

> [@mahsasalimi](#):
>
> I dont think so. I am not changing the screen size.

A Breakpoint Container does not care about the size of the page - it cares about its own dimensions. A View which contains a Breakpoint Container as the root container is indeed how this Popup should have been approached.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 10, 2022, 5:25pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/11 "2022-03-10T17:25:41Z")

</div>

I think that the container does matter though, when instead of changing the size of a component you’re switching the entire container to one with an entirely different layout.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 11, 2022, 7:42am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/12 "2022-03-11T07:42:15Z")

</div>

No i’m pretty sure it will not work

the moment you move or resize the upper level gets a width and height assinged which will overrule the size set by the button  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7a053d158b8bb3bf33888747f239ef3ac3d24ff5.png)  
The dragging and resizing with the mouse is done on the popup.  
Setting the default with of the container done by the button is done several layers below. So they do not work together. regardless what container you use it will not function as mahsasalimi wants.  
As there is no way to access the dimension of the upper layer through script.

When resizing is enabled the views demension will change to flex so you can no longer even change the size through the button.

The only work around to work with a button that changes dimenesion but still be draggable is to turn off resizing, and set the popup size to auto with the css class i provided

---

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [March 11, 2022, 7:46am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/13 "2022-03-11T07:46:29Z")

</div>

Thanks everyone for your input. I have tried different approches to this issue with breakpoint view and flex container , etc. The issue is the same in all cases , i.e when you move the popup after it has been opened , the width and height gets overwritten .  
the following is when opens and is not moved :

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/3/d34352d3012b9fd70599d421fb2a2817881b4c38.png)  
as you can see the element doesn’t have the width or height set and resizing works.  
The following happens when the popup is moved:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fae957acb2267ffd6c941003165bada510aa0876.png)  
the pop up gets a fixed width and height (automatically) and the resiszing doesnt work as expected  
When this happens , altering this automatically-given width value to auto solves the issue and it works as intended . however it gets overwritten as soon as you move the pop up again.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/348d678eb144485f19e61e84dfd3614df5a70e5c.png)

so the real issue is not the choice of container but the viewport getting a fixed width and height after being moved .

@victordcq I think you are onto something. can you explain a bit more how your solution works ?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 11, 2022, 7:48am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/14 "2022-03-11T07:48:21Z")

</div>

> [@mahsasalimi](#):
>
> . however it gets overwritten as soon as you move the pop up again

Yeah for that you will have to use the css class i provided.  
create a theme.css or inject it in a styleclass

> [@victordcq](#):
>
> ```python
> #popup-YourPopupId {
> width: auto !important;
> height: auto !important;
> }
> 
> ```

the **easiest way** is to inject it in a style class, **the correct way** is to make a theme.css

injection is done by putting the css in a styleclass background image surrounded by inverted brackets  
}{ (no need to assign the class to anything)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/08e07747b1b965932421676065c3fa74d71f2536.png)

a theme must be created here ` C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes`  
and import your default theme file (light css) and set your default theme to the one you just made.  
Do not edit existing themes as these will be lost on an update

make sure the id matches and you turn of resizing, and make it somewhat unique as it will work on all your projects and may sometimes cause unwanted behavior in other senarios

> [@victordcq](#):
>
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/db9e8b672bc6f8fb51b334b347acc2103c5ddcfb.png)  
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/02e8a748d2b566b05a9fa69965cd02493973dada.png)

---

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [March 11, 2022, 8:06am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/15 "2022-03-11T08:06:36Z")

</div>

Thanks so much @victordcq . will try it and report back !

---

<div class="post-metadata">

**Author:** ![Amreesh\_S](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Amreesh\_S](https://forum.inductiveautomation.com/u/Amreesh_S)\
**Post date:** [March 16, 2022, 10:24am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/16 "2022-03-16T10:24:30Z")

</div>

Kindly check the Grow & Shrink property. put value of both to 1 atleast shrink value to 1.

---

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [March 23, 2022, 11:36am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/17 "2022-03-23T11:36:34Z")

</div>

So what I ended up doing (following the tips from @victordcq ) was to create a custom css file with the following lines:

```python
.ia_popup {
    width: auto !important;
}

```

To sum up :  
The resizing of the popup works perfectly fine as long as you dont move the pop up .  
if you open the pop up and move it and expand it, it doesnt work, same if you open , expand and move (regardless of what container type you use) somehow the width and height of the root container gets overwritten (some width is assigned to it )  
The solution is to use css line mentioned above.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 23, 2022, 11:42am UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/18 "2022-03-23T11:42:51Z")

</div>

Are you now summing up that it doesnt work after moving, or was that a sumup of the problem you had? xD

Remember to turn of resizable too.  
And i advice you to use the`#popup-popupId` instead of the .ia\_popup class, because else it will cause troubles for other popups where you dont want this behavior

---

<div class="post-metadata">

**Author:** ![NARAYANAMOORTHY\_KUMA](https://avatars.discourse-cdn.com/v4/letter/n/48db29/32.png) [@NARAYANAMOORTHY\_KUMA](https://forum.inductiveautomation.com/u/NARAYANAMOORTHY_KUMA)\
**Post date:** [October 19, 2022, 1:53pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/19 "2022-10-19T13:53:52Z")

</div>

Hi @victordcq your fix for the above issue helped me to solve the same kind of issue in my project. Thanks for your valuable support.

---

<div class="post-metadata">

**Author:** ![Tiago\_Gomes](https://avatars.discourse-cdn.com/v4/letter/t/4da419/32.png) [@Tiago\_Gomes](https://forum.inductiveautomation.com/u/Tiago_Gomes)\
**Post date:** [September 4, 2024, 6:28pm UTC](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007/20 "2024-09-04T18:28:30Z")

</div>

Sorry to bump an old thread, but I found a new workaround for the resize after dragging issue.

The `:has` CSS selector is now supported in all major browsers  
and it lets you style elements based on their children ([:has() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)).

Basically I have two styles, `popupSize1` and `popupSize2`, that I apply to the root of the popup view, depending on the desired size for the popup and in my themes, I set up the following selectors:

```python
  div.ia_popup:has(.psc-popupSize1) {
    width: 300px !important;
  }
  div.ia_popup:has(.psc-popupSize2) {
    width: 300px !important;
  }

```

What this does is adjust the width of the `div` with the class `ia_popup` if it contains a child element with either `popupSize1` or `popupSize2` class. Essentially, the width is dynamically set based on the inner child class of the popup view root, allowing for flexible sizing depending on my needs.

[Next page](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007.md?page=2)