# New Feature: Perspective Split Container **URL:** \ **Category:** Ignition Early Access\ **Tags:** perspective\ **Created:** [May 31, 2022, 9:10pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233 "2022-05-31T21:10:36Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ghaugen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ghaugen/32/20494_2.png) [@ghaugen](https://forum.inductiveautomation.com/u/ghaugen)\ **Post date:** [May 31, 2022, 9:10pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/1 "2022-05-31T21:10:36Z")
Hey everyone, I’m happy to announce that the **Split Container** component is now available on the nightly builds. This component has exactly two children panels that are separated by a draggable divider handle that is used to resize the panels at runtime. Like the other available containers in Perspective the Split Container will be available as a root container for views as well as a container to use as a nested container. ![Screen Shot 2022-05-31 at 11.57.20 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da3a2817b964b291d9e57ec270c7e0cd13f46aac.png) The default properties of the split container are as follows: ![Screen Shot 2022-05-31 at 10.16.42 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/f/2fdda25805102c0617f656def07e4efe1d22237c.png) To dig a bit deeper into these properties and what they are used for: - _orientation_: Determines the orientation in which the container is fixed. Horizontal allows the user to resize the children panels from left to right while Vertical allows for the opposite directions of top to bottom. - _split.position_: Bidirectionally represents the current position of the split handle within the container. This property can be represented in one of two ways. The first, and default way, is as a string percentage value ranging from 0 to 100. Where the second is as a numeric pixel value ranging from `handleSize / 2 ` to `containerDimension - (handleSize / 2)` where `containerDimension` represents either the width or height of the container depending on the currently set orientation. - _split.size_: The size of the split handle in pixels - _split.visible_: Determines if the split handle is visible. Something to note: regardless of the value of this property the handle is still able to be dragged. - _split.draggable_: Determines if the split handle is draggable or not. The split container also currently has two component specific events: - onMinBoundReached - Fired when the minimum bound on the container is reached by the split handle - onMaxBoundReached - Fired when the maximum bound on the container is reached by the split handle That is a general overview of the Split Container, please give this component a try and feel free to post any feedback below. Thank you! ---
**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\ **Post date:** [May 31, 2022, 9:29pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/2 "2022-05-31T21:29:01Z")
I gotta say, this is awesome! I’ve been hoping something like this was implemented and here it is! ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 1, 2022, 3:25pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/3 "2022-06-01T15:25:38Z")
A few features I could see being really nice to use after playing with it a bit. 1. Manage the styling of the resizing, so if we changed the split position programmatically we could control the movement speed in a transform, would allow for cleaner styling. 2. Allowing for multiple splits, you could do this with nesting the containers but then you can’t control them as one, and you increase the number of components that need to be added into a screen, therefore loading time. 3. Defining a min/max expansion size per-pane, would be nice if you didn’t want to make subviews responsive down to minuscule sizes. 4. Customizing the styling of the split would be nice, take the split in the forums for typing a draft for instance, it’s thinner and cleaner looking in a tight environment. I can’t seem to figure out how to customize it other than making it invisible and so the default highlight is blue. 5. Changing the default highlight through styling, I’m sure this is possible through theming (so is 4) but that’s a bit of a “super user task” still at this point. All in all, super useful component and I look forward to augmenting builds with this! Definitely will be nice to create pseudo-docked views that we have a bit more control over. ---
**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\ **Post date:** [June 2, 2022, 7:50am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/4 "2022-06-02T07:50:51Z")
Good stuff! ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 2, 2022, 10:07am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/5 "2022-06-02T10:07:59Z")
That’s awesome component. Could add a new property for changing the icon of split handler? And style the vertical split line ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 2, 2022, 10:22am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/6 "2022-06-02T10:22:40Z")
Ahh nice! I’ve tried making this component myself a while ago, unfortunatly making containers is rather undocumented and hard so i had settle for “just the bar” and put it in the middle of a flex container which than manipulated the containers next to it. It basicly works identical, but it needs a little more setup. So this is nice! ---
**Author:** ![ghaugen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ghaugen/32/20494_2.png) [@ghaugen](https://forum.inductiveautomation.com/u/ghaugen)\ **Post date:** [June 2, 2022, 8:58pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/7 "2022-06-02T20:58:59Z")
I appreciate the feedback, and those are some good ideas! Especially regarding the general styling access and the min/max size. Going to take a look into those and get some tickets made regarding potential updates. ---
**Author:** ![ghaugen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ghaugen/32/20494_2.png) [@ghaugen](https://forum.inductiveautomation.com/u/ghaugen)\ **Post date:** [June 2, 2022, 9:02pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/8 "2022-06-02T21:02:15Z")
I appreciate it! I think both of those are good ideas and are doable for sure. I’ll take a look into it ---
**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\ **Post date:** [June 9, 2022, 10:45pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/9 "2022-06-09T22:45:14Z")
I have noticed when using this container my CPU usage spikes when I adjust the location on the split. This causes the dragging motion to seem a bit jumpy on the lower powered computer I typically use for HMIs. Is this something IA is aware of? Are there future performance improvements for this container in the works? ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 10, 2022, 9:56am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/10 "2022-06-10T09:56:06Z")
I see same issue ---
**Author:** ![ghaugen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ghaugen/32/20494_2.png) [@ghaugen](https://forum.inductiveautomation.com/u/ghaugen)\ **Post date:** [June 14, 2022, 7:19pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/11 "2022-06-14T19:19:19Z")
Thanks for bringing this to our attention, I was unaware of the CPU spikes while the split handle is moving. Ill create a ticket to take a look into some potential performance improvements on how that is implemented ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 18, 2022, 8:24am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/12 "2022-06-18T08:24:10Z")
Hi @ghaugen Is it possible to expose style option for both left and right containers. Right now applying style only effect the right side container. So in nutshell we have 5 style sections: 1 splitter area support following properties: border width ![Screenshot_20220602-143732_Chrome](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b31ff56ec6363b3479a59ca626b7ebf41c3369bb.jpeg) 2 left side container 3 right side container 4 whole component 5 icon section For icon we have property to change the icon ---
**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\ **Post date:** [July 15, 2022, 7:56pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/13 "2022-07-15T19:56:58Z")
+1 for user definable min/max It’s just as awesome as i thought it would be! Thank you again 🙂 ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [July 26, 2022, 8:49am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/14 "2022-07-26T08:49:42Z")
Hi @ghaugen It seems after updating to 8.1.18 the split container doesn’t work and doesn’t accept embedded view any more. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4a33c647276da0d1315f97eab381f6c4bbc2dfaf.png) ---
**Author:** ![ghaugen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ghaugen/32/20494_2.png) [@ghaugen](https://forum.inductiveautomation.com/u/ghaugen)\ **Post date:** [July 26, 2022, 5:15pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/15 "2022-07-26T17:15:51Z")
Hi @nader.chinichian, I was not aware of that, thanks for pointing this out. Is it just not working in general and not accepting any component or just the embedded view component? ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [July 26, 2022, 5:41pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/16 "2022-07-26T17:41:14Z")
I work fine in general but I can’t drag and drop view into it. I close and open view several times and some time randomly it accept embedded view. ---
**Author:** ![ghaugen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ghaugen/32/20494_2.png) [@ghaugen](https://forum.inductiveautomation.com/u/ghaugen)\ **Post date:** [July 27, 2022, 4:29pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/17 "2022-07-27T16:29:04Z")
Huh okay Im seeing a little bit of inconsistency as well, Im going to dig into this a bit deeper at some point today and get a ticket made for it. ---
**Author:** ![ken.maze](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ken.maze/32/85876_2.png) [@ken.maze](https://forum.inductiveautomation.com/u/ken.maze)\ **Post date:** [October 5, 2022, 3:08am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/18 "2022-10-05T03:08:10Z")
I happened to see this while looking for something else today, made a mental note, then later, I thought of exactly the place where I need to use this! I went home and tried it on 8.1.19 Maker and am having no problems dropping an embedded view to both sides. I'm looking forward to putting it into this special place I have envisioned at work. One question: Is it possible to make either side either shrinkable or cut it off as the split is moving, as if there is a shrink = 0 or 1 when components are being used in a Flex container? Thanks! ---
**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:** [October 5, 2022, 3:38am UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/19 "2022-10-05T03:38:36Z")
It depends on the layout of the View being embedded, but this is very easy to do with Coordinate Container layouts in the View being embedded. If your View being embedded is a Flex layout, then you're only going to get the behavior you're looking for if the flex direction is the same as the handle movement, ie: `direction` = `row` in a Split Container with `orientation` = `horizontal`. ---
**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\ **Post date:** [October 5, 2022, 4:02pm UTC](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233/20 "2022-10-05T16:02:04Z")
Any updates on performance improvements? [Next page](https://forum.inductiveautomation.com/t/new-feature-perspective-split-container/60233.md?page=2)