I am using cylindrical tank template tied to UDT that I place on various screens. The rendering is good however I hate the fact there is so much screen space in the tank, If could show % fill and the tank value inside the tank that would clean up the screen quite a bit.
I was using flex container for the template screen. Should I have picked the Coordinate container?
Short answer, yes. Long answer, maybe.
It is a little tricky for people new to Perspective to get any components to be on top of others with the Flex Containers.
It CAN be achieved with some css layout properties to anchor it to some reference.
If you use Co-ordinate container it will be much easier to layer components on top of each other, but you sacrifice the ability to make components flow around as the available space changes.
Also doing hack fixes with CSS will really destroy the ease of maintenance of the system.
A coordinate container could be used to contain the tank and the extra value and then include the container as a sub view on the flex container.
Alternatively make the whole visual as an SVG and bind the values to the elements in the SVG and make it look awesome.
1 Like
Don't forget you can embed containers like coord containers
The reason I went with flexcontainer was because coordinate container was showing scrollbars based on the page view and I could not get rid of it. Since components were filling the spare completely I did not have the scrollbar problems. I tried various settings under misc styles to hide scrollbars and it did not work for me.
If you're developing templates for a p&id screen, I always use coord containers set to percent mode. I don't think I set the aspect ratio on the templates, but make sure to set the p&id mimic view to coord, percent, and set the aspect ratio to the size of the view's defaultsize
1 Like
Maybe not the best method, but you can use negative margin values, this can sometimes allow "stacking".
I generally do my layouts how @nminchin is describing.
If I'm stacking things I put them in a coordinate container and then control the layout of that with a parent container which varies based on the layout I'm going for.
Whether I do % or pixel varies. I agree that percent mode is usually a really good option. One context I would go with pixel (and scroll) is if I'm doing a project where they want to be able to open a P&ID screen on a mobile device but they don't want to put a large amount of time in development. So they would pan around the P&ID screen if they're on a mobile device.
I don't like stacking things with CSS for the reasons @David_Stone gave.
You can get rid of the scrollbars by adding and manipulating the "overflow" style property ("Misc/Overflow" if you use the style wizard). I have seen this behave strangely in embedded views but it still works well for eliminating scrolbars. Play around with adding this to the template and/or embedded view instance until it's doing what you want. I suspect the scrollbar issue you were having would be fixed by adding the overflow to the embedded view.
You can mix layouts. In this example I have a flex view with a tank, a coordinate container set to allow overflow and an icon on the bottom of the flex view. It allows me to extend beyond the bounds of the coordinate container to overlap with other elements in the flex container. This is just an example to show how you can use overflow. I have the coordinate container selected in the designer so you can see how the pipe is extending outside the bounds of the container and overlapping with the element at the top of the flex container.
1 Like
Thank you for your replies, earlier I could not figure how to get rid of scroll bars. Changing it to % was great. it fixed the issue and I used coordinate container and stacking was easy.
