# \[How-to\] Make a breakpoint container in vision

**URL:** <https://forum.inductiveautomation.com/t/how-to-make-a-breakpoint-container-in-vision/74744>\
**Category:** Ignition\
**Tags:** ignition81, perspective, vision\
**Created:** [June 8, 2023, 2:04am UTC](https://forum.inductiveautomation.com/t/how-to-make-a-breakpoint-container-in-vision/74744 "2023-06-08T02:04:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [June 8, 2023, 2:04am UTC](https://forum.inductiveautomation.com/t/how-to-make-a-breakpoint-container-in-vision/74744/1 "2023-06-08T02:04:58Z")

</div>

So, like many others, I've switched to perspective for the majority of my new projects in Ignition, but occasionally I have to go back to vision. And like many others I imagine, going from responsive UI design to whatever you consider vision to be can be painful.

Recently one of those pain points was not having a breakpoint container, and following the normal design logic in vision of build for the small screen and let java scale it up was not working well for my use case. So I spent the day getting exactly one step closer to a responsive-ish experience, by making a 'breakpoint' container in vision.

Steps to make a breakpoint container:

1. Create a container in the Root Container of your view (you could also use the root container itself I suppose). I set my container to be anchored on all 4 sides.

2. Give this container the following custom properties: `breakpoint` of type int, `small` of type bool, and `large` of type bool.

3. Put your expected breakpoint size in the `breakpoint` property value (I normally run 800). This value is in px (I think?).

4. Inside of this new container, place 2 new containers, named `_small` and `_large` respectively. Make sure each one takes up the entirety of the parent container space, and set them both to be anchored on all 4 sides.

5. Bind container `_small`'s visibility property to the custom property `small` on its parent container. Do the same with container `_large` and the parent container's `large` property.

6. In the `internalFrameOpened` event of the window, place this script:

> **internalFrameOpened event handler script**
>
> ```auto
> from java.awt.event import ComponentListener
> # custom listeners
> class breakpointContainerListener(ComponentListener):
> 
> def componentResized(self, event):
> 
> currentWidth = event.source.width
> breakpointWidth = event.source.getPropertyValue("breakpoint")
> 			
> if currentWidth <= breakpointWidth:
> event.source.setPropertyValue("small", True)
> event.source.setPropertyValue("large", False)
> else:
> event.source.setPropertyValue("small", False)
> event.source.setPropertyValue("large", True)
> return
> 		
> # you need these to stop a flood of errors in the log
> def componentMoved(self, event):
> pass
> return
> 		
> def componentHidden(self, event):
> pass
> return
> 		
> def componentShown(self, event):
> pass
> return
> 			
> resizeListener = breakpointContainerListener()
> event.source.rootContainer.getComponent('theOneContainerWithTheBreakpointProperty').addComponentListener(resizeListener)
> 
> ```

1. Save and launch the client. (Maybe also change the two inner containers to be different colors so you can see when they change) Play around with resizing the window and rejoice in your ability to layout the same information in different orientations in the same window.

2. When editing either container, toggle the `small` and `large` property on the breakpoint container to show whichever container you want to work on.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 8, 2023, 11:50am UTC](https://forum.inductiveautomation.com/t/how-to-make-a-breakpoint-container-in-vision/74744/2 "2023-06-08T11:50:46Z")

</div>

Hmm. Maybe I should make a MigLayout container...

---

<div class="post-metadata">

**Author:** ![bkarabinchak.psi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bkarabinchak.psi/32/83567_2.png) [@bkarabinchak.psi](https://forum.inductiveautomation.com/u/bkarabinchak.psi)\
**Post date:** [June 8, 2023, 12:12pm UTC](https://forum.inductiveautomation.com/t/how-to-make-a-breakpoint-container-in-vision/74744/3 "2023-06-08T12:12:16Z")

</div>

That would be awesome. Please!