(feature-2943) Perspective Accordion

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
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


image

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)?

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

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.

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.

1 Like

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 :sweat_smile:, 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.

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?

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.

@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.

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

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".

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 :disappointed:.

I will let you know if I get it to work :slight_smile:

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

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 (31.3 KB)

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)?

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

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.

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

.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

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?

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! :laughing:)?

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

More information:
Manual: https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes
Blog Post: Introducing Theming in Perspective | Inductive Automation
Community Live Video: Ignition Community Live: Theming in Perspective - YouTube

1 Like

There sure is :slight_smile:

  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
1 Like