Perspective Popup runtime resize behavior

Ignition
,
1

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
image687Ă—508 50.9 KB

this is how it looks when it is resized (without moving)
image
image770Ă—507 50.3 KB

The slighets movement of the popup will result in the following behavior
image
image
image325Ă—525 27.4 KB

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
image760Ă—516 32.5 KB

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 .

2 Likes
2

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.)

3

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)

4

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 :

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 :

	
	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']
5

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

1 Like
6

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

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

image
image

1 Like
7

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

8

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?

9

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

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.

10

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.

1 Like
11

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.

12

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
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

13

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
image1356Ă—651 101 KB

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
image1338Ă—501 124 KB

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
image1352Ă—416 89.7 KB

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 ?

14

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

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
image768Ă—228 13.9 KB

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

1 Like
15

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

1 Like
16

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

17

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

.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 to mentioned above.

1 Like
18

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

3 Likes
19

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.

1 Like