Perspective Popup runtime resize behavior

[mahsasalimi]

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

this is how it looks when it is resized (without moving)

The slighets movement of the popup will result in the following behavior

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.

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 .

[Transistor]

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

[victordcq]

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)

[mahsasalimi]

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

[lrose]

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

[victordcq]

@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

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

[mahsasalimi]

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

[lrose]

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?

[victordcq]

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.

[cmallonee]

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

[lrose]

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.

[victordcq]

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

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

[mahsasalimi]

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 :

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:

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.

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 ?

[victordcq]

@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

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

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

[mahsasalimi]

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

[Amreesh_S]

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

[mahsasalimi]

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

[victordcq]

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

[NARAYANAMOORTHY_KUMA]

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.

[Tiago_Gomes]

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

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:

  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.