I recently started using Perspective in Ignition 8 and am noticing some strange behaviour with regards to window/graph resizing.
In the designer, my ‘Trends’ tab appears as:
However, in the web-browser, the ‘Trends’ tab looks like:
All of the graphs are squashed. Does anyone know what could be causing this? Its completely bizarre considering the web-browser is larger in both the x and y domains than the View.
What sort of Container are you using?
If the XY Charts are in a Flex Container, and they have position.grow set to 1, then they will exhibit this behavior, because their container is growing to fill the View port and they’re growing to fill their parent.
Making a couple os assumptions here:
The Container which the Tab Container resides in (from here on out TabParent) is either a Flex or Column Container, and the Tab Container is configured to always fill the parent.
The Container which the XY Charts reside in (from here on out XYParent) is either a Flex or Column Container with props.direction set to “row”, and the XY Charts are configured to always fill the parent with two charts per row.
So…
TabParent(FlexContainer)
__TabContainer(position.grow=1)
____ImportantFlexContainer(props.direction=‘column’)
______XYParent_1(props.direction=‘row’, position.grow=0)
________XYChart_1(position.grow=1)
________XYChart_2(position.grow=1)
______XYParent_2(props.direction=‘row’, position.grow=0)
________XYChart_3(position.grow=1)
________XYChart_4(position.grow=1)
What it looks like is happening is:
ImportantFlexContainer.props.direction is “column”) to fill the parent, and so XYParent’s children also stretch to then fill XYParent; no vertical stretching takes place because XYParent.position.grow=0.This is all a consequence of using Flex Containers. You get the responsiveness and ease of “flexing” to fill available space, but it means you’re on the hook for determining just how “flexy” something should be.
Setting XYParent_1/XYParent_1.position.grow to 1 will result in the charts expanding “downward” as well as to the right like you’re seeing. If you do not want them changing size at all, then you’ll need to set the XYChart(1,2,3,4).position.grow properties to 0.
Hi @cmallonee,
Thanks for your response. Since the original post, I’ve made a number of modifications to the View. I now have four Flex Containers with two XY charts each. Interestingly, even though I’ve copy/pasted the Flex Containers to add these extra charts, the squishing only applies to two out of the four containers:
Additionally, this only seems to be the case in Google Chrome - the charts are displaying correctly in Microsoft Edge and Firefox.
I have created a graphic showing my configuration of containers for the XY Chart tab:
I am using Ignition 8.0.1.
Is there any chance you could pst theView in question in this thread, or could you send it to me via Direct Message? There’s no reason the four left-most Charts should be “squishing”, unless something else is acting on them. The position.grow property essentially manages what happens when there IS available space. From the layout in the new screenshot, it appears that even though the Charts have the option to grow, there is something preventing them from doing so.
That’s not to say that there isn’t a bug here, but I can’t say for sure without looking at the contents of the View and their settings.
I don’t seem to be encountering the issue, although I obviously don’t have the data backing my tables.
What you could conceivably try is setting position.shrink to 0 for each of the tables. This would in essence prevent them from “shrinking” at all.
