# Hiding or showing different components based on breakpoint?

**URL:** <https://forum.inductiveautomation.com/t/hiding-or-showing-different-components-based-on-breakpoint/30416>\
**Category:** Ignition\
**Tags:** ignition80\
**Created:** [December 3, 2019, 7:57pm UTC](https://forum.inductiveautomation.com/t/hiding-or-showing-different-components-based-on-breakpoint/30416 "2019-12-03T19:57:56Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [December 3, 2019, 7:57pm UTC](https://forum.inductiveautomation.com/t/hiding-or-showing-different-components-based-on-breakpoint/30416/1 "2019-12-03T19:57:56Z")

</div>

I have a Perspective view of a form using the column view container type.

I want it so that when the breakpoint is in the “Small” category, my DateTimeInput component is visible, and my DateTimePicker component is hidden. When the breakpoint is in medium or large, my DateTimePicker component is visible and my DateTimeInput is hiddne. How can I do this?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 3, 2019, 8:04pm UTC](https://forum.inductiveautomation.com/t/hiding-or-showing-different-components-based-on-breakpoint/30416/2 "2019-12-03T20:04:39Z")

</div>

The column container only allows layout changes at different breakpoint sizes - you cannot change which components you actually have.  
What you could do instead is start from a breakpoint container, and then embed a column container (or a dashboard component) to achieve the layout you’re looking for.

---

<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:** [December 3, 2019, 8:06pm UTC](https://forum.inductiveautomation.com/t/hiding-or-showing-different-components-based-on-breakpoint/30416/3 "2019-12-03T20:06:52Z")

</div>

Ok, I technically have both components on my view now. I was wondering if it’s possible to access which “breakpoint” is currently in use and write a expression on both of their visible properties. I was just looking through the props/objects tree to see if there’s one that indicates which breakpoint we are currently using. Is there one? Or is that computed behind the scenes?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 3, 2019, 8:43pm UTC](https://forum.inductiveautomation.com/t/hiding-or-showing-different-components-based-on-breakpoint/30416/4 "2019-12-03T20:43:49Z")

</div>

Nothing that’s exposed to you, as far as I know, but I’m not an expert - I’ll let @cmallonee chime in 🙂

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [December 3, 2019, 9:02pm UTC](https://forum.inductiveautomation.com/t/hiding-or-showing-different-components-based-on-breakpoint/30416/5 "2019-12-03T21:02:58Z")

</div>

We currently don’t expose any breakpoint or viewport width properties. As @paul-griffith recommended, the Breakpoint Container is specifically designed so that you can use **different** components at different dimensions, and the Column Container is designed so that you can use the **same** components but in different locations.

There is already a [post](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/expose-viewport-dimensions-in-perspective) on the forums to expose viewport dimensions so that you can make adjustments based on viewport properties. Even once that idea is implemented you’d need to hide/un-hide the components as you see fit, which would really require a Flex Container, so then you’re going in a whole different direction.

My advice is to do as was already mentioned, and use a Breakpoint Container for your View’s root, and then place a Column Container for each breakpoint.