Breakpoint Container

The breakpoint container has two configurations for responsive- small and large. I have a situation where I have an additional configuration between small and large. Please advise on the approach to achieve responsive display for the three configurations in Ignition.

Further the column container has three configuration . Is it possible that I can have three views defined for three responsive configuration and embed the respective views on the column container. Is this a valid approach from responsive design perspective?

Nested another breakpoint inside the main breakpoint.

No, the column container can only show the one set of components and it will simply shuffle these around based on how you’ve configured your 3 configurations

Please could you provide a short example to illustrate the configuration. Thanks for your suggestion.

Yes, I want to show only one set of configuration and view at one point… To further clarify assume there are three views small, medium,and large corresponding to the three configurations offered by column container. Given this mapping between view and container configuration, will this be able to achieve the responsive design as desired.

Some screenshots might help of what you’re trying to achieve at each column breakpoint . Use paint to doctor up what you’re after if you need to

I’d love to see the creation of more than two breakpoints per breakpoint container.
We generally build out all of our screens with embedded views or flex repeaters, so it would be easy to configure additional views for different sizes. I often also pass parameters all the way down to highly-configured component views, so it would be easy to have an embedded view pass a widthLimited for mobile devices and widthExtended for 4k monitors in control rooms.

I can imagine four views being common: 1. Mobile, 2. Smaller window or tablet size, 3. Full 1080p/1440p monitor, 4. 4k/Ultrawide display/control room. It would be great if I could set all four of these, with three breakpoints, in a single breakpoint container.

Beyond that, it would be even better if there was a way to change properties or pass parameters to change at viewpoints rather than having to copy components/views into each breakpoint. For example, I could bind a flexbox container direction so it’s a row above a breakpoint or column below a breakpoint. Or I could bind the example widthExtended and widthLimited parameters above to adjust content within embedded containers based on a breakpoint.

1 Like