I found an issue where a carousel component got squished when displaying on Workstation but displayed fine in a browser (left view is launched as windowed in Workstation, right is opened in Chrome):
I would expect it to display in Workstation the same way it would in a browser, i.e. taking the full height of the container it’s wrapped in.
Digging into what caused it, I discovered that it’s really specific, but can be recreated by doing the following:
- Create a new Flex Container view.
- Add a Flex Row container.
- Add a carousel component to the Flex Row container, and embed whatever view you like.
- Add a Table underneath the Flex Row (in the main body).
- Set the Table basis to “auto” and both grow and shrink to 1. You will likely see the carousel disappear here (or only show arrows and dots if you have multiple views added to the carousel).
- Launch the view in both Workstation and in a browser for comparison.
On Workstation, the carousel will be the smallest height it can, but in the browser, it’ll be fine.
If you close and reopen that view, the following error should be generated:
onerrorLogger: {"msg":"Uncaught Exception","errorMsg":"ResizeObserver loop limit exceeded","url":"http://localhost:8088/data/perspective/client/SavronHMI/ignition","line number":0,"column":0}
From my investigation to recreate the issue, the key factors to cause the resizing issue seem to be:
- Having the carousel component in a container where the carousel’s height is expected to inherit the height from the container
- Having a table component involved elsewhere on the screen
- Having the table’s height
auto(either inherited by the container it’s in or directly set on the table itself) and allowed to grow
This is using Ignition 8.1.11 and Perspective Workstation 1.1.11 on Windows 10.