# (feature-2943) Perspective Accordion

**URL:** <https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [June 7, 2021, 9:00am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508 "2021-06-07T09:00:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 7, 2021, 9:00am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/1 "2021-06-07T09:00:13Z")

</div>

Using Ignition 8.1 and the accordion  
When expanding Header1 in an accordion, if the item body has a height greater than the screen, then the body pushes Header2 off-screen.

What settings (if possible) are needed if I want to constrain the body of Item1 to only expand as much of the screen until Header2 is still on screen. Then the container for Body1 becomes scrollable within just the container.  
The view is a flex view with the following settings:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fbfb3e6b55fad844013a400479d9af1b2da7fb15.png)  
The items[0].body.height = auto. If I set this parameter to a number of fixed pixels that are less than the screen height, then the behavior works, but is not dynamic across different devices with resolutions of varying heights.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bc4cc8caa91a940341960d3ff798d1c0390adde7.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/f/9f52e00464558561b0159f52ff634bb190101233.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f79c849913273cf08c754eb4f373878c8829cba6.png)

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 7, 2021, 9:43am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/2 "2021-06-07T09:43:21Z")

</div>

Hi @321liftoff, I wouldn’t expect it to expand past the label component (I would expect it to also push it down), this may be a bug.

That being said, I am unable to replicate the issue you are seeing (I am using 8.1.5). What position properties have you got for the accordion? Also, could you post any other associated properties associated with the accordion and view(s)?

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 7, 2021, 9:52am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/3 "2021-06-07T09:52:29Z")

</div>

Steps to replicate:

1. create a new Coordinate view
2. add a component to this view
3. create a new Flex view
4. change height of view from 800px to 500px
5. add an accordion component
6. in the accordion properties, browse to ‘items’, right-click on “0” and click duplicate so there are two entries
7. change basis of accordion from “300px” to “auto”
8. go to the 0.body.viewpath and select the coordinate view created above
9. change 0.body.expanded to true and observe that the header for the 2nd item is pushed off-screen

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 7, 2021, 10:08am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/4 "2021-06-07T10:08:07Z")

</div>

Right gotcha! This is because of the position properties of the accordion. I’m guessing it is desirable for the accordion options to be at the bottom, hence using auto?

Changing the grow/shrink to 1 and setting basis to a px value causes the correct scrollbar behaviour, but pushes the dropdowns to the top of the view.

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 7, 2021, 10:21am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/5 "2021-06-07T10:21:04Z")

</div>

Can you list what exactly you changed from the steps I listed above to get a scrollbar within just the body?

I found that simply changing “items.0.body.height” from auto to 300px will add the scrollbar, but the accordion may not make full use of a mobile device’s screen.

And, yes, I want the collapsed headers to justify to the bottom of the flex container.

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 7, 2021, 10:47am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/6 "2021-06-07T10:47:05Z")

</div>

> [@321liftoff](#):
>
> Can you list what exactly you changed from the steps I listed above to get a scrollbar within just the body?

Apologies, the method I suggested only creates scrollbars for the entire accordion, not the individual bodies. I believe this will only be possible by providing an explicit height (not using auto).

In my limited experience of trying to use the accordion, I have often resorted to creating my own version of it to get the functionality desired (I also found it's not responsive enough). Probably not the answer you're looking for 😅, maybe others on here have better methods.

If you only require a different height for desktop/mobile you could bind it to the device type session prop and explicitly state 2 different heights suitable to the appropriate device, but this isn't really providing responsive behaviour. I'm guessing this isn't really the best solution for you though.

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 7, 2021, 12:15pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/7 "2021-06-07T12:15:51Z")

</div>

Thanks for considering the use-case. Any broad guidance on how to create your own? Just a combination of embedded view components with on-event scripts?

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 7, 2021, 12:47pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/8 "2021-06-07T12:47:23Z")

</div>

> [@321liftoff](#):
>
> ust a combination of embedded view components with on-event scripts?

You've hit the nail on the head. It's not very easy to do if you are looking to do it dynamically, but if you have a static number of views it's pretty easy.

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 7, 2021, 1:44pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/9 "2021-06-07T13:44:28Z")

</div>

@mperkins Do you have any guidance regarding having the view scrollable?

I plan on dynamically building out the accordion, so manually recreating it with fixed embedded views won’t work for my use-case.

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 8, 2021, 6:54am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/10 "2021-06-08T06:54:34Z")

</div>

@321liftoff, I had a play last night (unfortunately, I couldn’t spend to long on it because of a household IT crisis… 😅).

What I did find is that there is a (html) style solution to your problem. In Chrome’s dev tools you can edit the `<div class="ia_accordionComponent__wrapper">` to include `style="flex-direction:column-reverse"`.

 ![wrapperFlex](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4e17b932a03addb22360343dcbf3f52a6a3351b9.jpeg)

The only issue I have had so far is getting Ignition to use this. I was hoping this would be possible via theming, but I haven’t had any success so far 😞.

I will let you know if I get it to work 🙂

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 8, 2021, 1:39pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/11 "2021-06-08T13:39:20Z")

</div>

> [@matthew.ayre](#):
>
> style="flex-direction:column-reverse"

Thanks for keeping with this. After applying this attribute, my entire accordion still is scrollable with the large view expanded.

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [June 8, 2021, 6:06pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/12 "2021-06-08T18:06:12Z")

</div>

I managed to do this using an embedded view as an intermediary.

(Flex View → Accordion Container Child) → (Another Flex View → Embedded View) → Coordinate view

The “Another Flex View” does some math based on some params, totalHeight, headerHeight, and numberOfItems from the accordion container.  
The Embedded view makes the scrollbar for the ultimate view.

This is clunky, ideally we’d have an easier way to do this. But for now this works.

[AccordionTest\_2021-06-08\_1102.zip](https://forum.inductiveautomation.com/uploads/short-url/fyPbaRZBjQHVUX0MLC6gTHNaRt.zip) (31.3 KB)

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 8, 2021, 6:50pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/13 "2021-06-08T18:50:55Z")

</div>

I see in the “Embedded\_Wrapper” view that there is a parameter called “totalHeight” which is set for 300px from the Accordion component. This seems to mean that I need to know ahead of time what the height will be; the desire is to expand to the height of the device, whatever it is. If I knew the height ahead of time, I could simply set “items[0].body.height” on the accordion component to that same pre-known height, which allows the scrolling to work correctly.

Is there a configuration I can use with your Embedded\_Wrapper that would allow the expanded accordion to use up all of the vertical space (height = auto behavior)?

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [June 8, 2021, 6:55pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/14 "2021-06-08T18:55:58Z")

</div>

You’re right, it does need to know the height before hand… so not a solution for your scenario. I’m thinking a feature ticket may be required to fully address it. Perhaps an accordionProp called `constrainHeight` or similar

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 8, 2021, 7:13pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/15 "2021-06-08T19:13:52Z")

</div>

That would work. Enabling the property would keep all accordion headers on the screen and give the remaining space to any expanded bodies, is my first thought.

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [June 8, 2021, 7:24pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/16 "2021-06-08T19:24:59Z")

</div>

in the mean time, I think I found a way to do it through theming

```auto
.ia_accordionComponent__wrapper {
	height: 100%;
}

.ia_accordionComponent __body.ia_accordionComponent__ body--expanded {
	flex: 1 1 auto;
}

```

try it out, and let me know if it works for you

---

<div class="post-metadata">

**Author:** ![321liftoff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/321liftoff/32/27544_2.png) [@321liftoff](https://forum.inductiveautomation.com/u/321liftoff)\
**Post date:** [June 9, 2021, 2:28am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/17 "2021-06-09T02:28:56Z")

</div>

> [@mperkins](#):
>
> `height: 100%;`

If by try it out, you mean to manually edit the loaded Perspective view through Chrome developer tools, I tried it and seems to fix it.

Is there a way to deploy these customizations through the perspective designer?

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 9, 2021, 7:41am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/18 "2021-06-09T07:41:34Z")

</div>

Hi @mperkins, I tried messing with the `.ia_accordionComponent__wrapper` flex styles but it was being overridden elsewhere. Never thought to use the height!

Do you know if there are any plans to extend theming functionality to do more with overriding CSS properties (I have a taste of power and now I want more! 😆)?

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 9, 2021, 7:44am UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/19 "2021-06-09T07:44:05Z")

</div>

> [@321liftoff](#):
>
> Is there a way to deploy these customizations through the perspective designer?

Theming is not done through the designer, no. You have to manually edit the .css files. This is a very useful feature 🙂

More information:  
Manual: [Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes)  
Blog Post: [Introducing Theming in Perspective | Inductive Automation](https://inductiveautomation.com/blog/introducing-theming-in-perspective)  
Community Live Video: [https://www.youtube.com/watch?v=2RrRZpmnfS8](https://www.youtube.com/watch?v=2RrRZpmnfS8)

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [June 9, 2021, 3:11pm UTC](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508/20 "2021-06-09T15:11:43Z")

</div>

There sure is 🙂

1. Navigate to your theming directory - should be `C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes` or similar depending on your install folder and OS. Mine is Windows with the default install folder
2. Create a new CSS file, say `custom.css`, paste in the CSS I provided above and save the file in the same directory
3. Edit `light.css` and `dark.css` add this line to both of them `@import "./custom.css";` or whatever your file name is and save.
4. (Optional - but highly recommended) open `README.md` in your favorite text editor

[Next page](https://forum.inductiveautomation.com/t/feature-2943-perspective-accordion/47508.md?page=2)