[IGN-572]Flex as default view type

In my efforts to be better at working with perspective I have come across a few different places that suggest one of the first things I should do is break out of the mindset of using coordinate containers and treating it like Vision, and make 90% of my views flex containers instead. If that is actually the consensus, what do you think about making that the default? I think it would help push new users in that direction, and make building views a little faster if that’s the most used type.


As someone who you definitely has preached this on the forums for a while, I am in full support of this idea, better to nudge people in the direction of a cleaner practice, than just the practice they are used to!

I think it would just be a matter of, does Inductive Automation agree that is a cleaner practice to think flex-first? :thinking:

EDIT: Also, here’s an ideas post Flex Container by Default | Voters | Inductive Automation

1 Like

I don’t know if they speak for the whole company, but the two places that come to mind where I’ve seen this suggested were a response by an IA team member telling a user how they can master perspective, and during the tech demo meeting I had with IA earlier this week. So at least some of them agree.

1 Like

I am also claiming this term as something I have invented right now, as its catchy and accurately describes the solution lol

1 Like

Im really not a fan of flex root containers, i would rather put a flex in a coordinate container

Any reasoning for this? I feel like this would defeat the goal of mobile responsiveness for the most part, unless there is something I am missing.

Yeah perspective seems to overrule certain styles if you use anything but a coordinate container in fixed mode.
The biggest one i cant seem to live without is using calc() in positions and sizes. i often do something like calc(100% - 40px) To make my buttons always stick to a corner but still make everything size correctly on smaller screens.
I suppose its more work, since i gotta fill in all the sizes manually, but this way i got more control over it xd

We probably do 90% flexbox, and I cringe every time I need a coordinate container. Once you get the hang of flexbox, it’s so much better.

I’ve actually never used that css expression, by any chance would you have a screenshot of a good use-case for this? It sounds like having a beaded container flex-end With 40px of padding would do the same thing, but maybe I’m envisioning it off.

1 Like

Isn’t the problem a flex container is designed to solve that of flowing layouts on different sized screens?

If perspective was a purely mobile solution, then yes, a flex container as a default would make sense.

However, there is this drive to put Perspective on the desktop in order to (eventually?) replace Vision. In that use case, IMHO a flex container as a default doesn’t make sense, as you are not going to be sending your full desktop layout to a mobile device in the first place, and that companies generally specify consistent desktop environments across sites - thus reducing the need for a flow based layout in general.

My understanding is that perspective itself is meant to solve the problem you described, and flex containers are just one of the many tools they use to accomplish that.

I haven’t heard of the push to replace vision with perspective, I thought the advice from IA was that if you want a stable layout for a desktop then vision is for you. Even if it means designing a vision screen for your desktops and perspective for your mobile devices.

If that is the push, I’m definitely not a fan. Not coming from a webdev background, I find perspective much more difficult to use. I think that would significantly steepen the learning curve for integrators getting started with ignition.

Maybe “replace” isn’t necesarily the best word, but there exists Perspective Workstation which is used to run Perspective sessions in a seamless manner on a desktop device.

The idea would be to be able to make one screen do both, so you don’t have to make entirely new resources and navigation for different device types. Honestly so far in my perspective experience, I’ve rarely used just one type of container. Granted I will say that probably 80-90% of my screens start with a flex container, I’ll usually use a breakpoint or column container as well.

It also helps even if you have variable sized displays throughout your plant. If devices/resolutions/displays are configured differently, this can allow things to scale to give similar look and feel with better scaling options. Not saying coordinate container can’t do that a little bit with their percent scaling mode, but its not quite as powerful in my opinion.

I disagree with “make one screen do both”

An operator sitting at a desk has a totally different use case than someone walking around a plant. Making the two use cases point to the same resource and flow them onto whatever device they are using will make someone very unhappy.

This is why there are already CSS media queries to deliver different resources depending on device resolution - so the same content isn’t delivered to to an inappropriate device (I’m looking at you slashdot)

1 Like

While I don’t disagree for some cases, I can think of several roles in companies I’ve worked with where having access to the same screens that they have launched across several monitors in a control room would be very useful to have with similar functionality at a mobile or tablet scale versus larger desk monitors. Obviously things need to be re-arranged, but this would allow it to still reside in the same project for both screens without changing your navigation setup. Or you use a breakpoint container to load up two completely different layouts while having one web address regardless of the device you are on and have it choose the layout based on resolution.


So, there’s a long-extant ticket to improve the user experience here at least a bit.
Currently, the plan is to make the designer ‘remember’ your last selection, at the very least - so if you last made a flex container, as long as you keep your designer open, the selection will default to flex.

Longer term, we want to move more “stuff” like this into a designer attached property store/configuration, that persists across restarts. There’s lots of complications there, though, so don’t expect it in the short term. However, I did kick the existing ticket to make this dialog ‘remember’ your last selection up in priority based on this thread + the ideas post linked.


I have found that I am almost always using a break point container at the root, because my users want the same information available on a desktop and a mobile device. So I need to have screens which work on everything from a T.V. to a mobile phone.

From there I fall into the 80-90% Flex group, and have a hard time getting Coordinate Containers to behave the way I want.

Woohoo! Its in a nightly now.

Long live the flex container!