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:
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.
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)?
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.
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.
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.
@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".
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 .
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.
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.
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! )?
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
Create a new CSS file, say custom.css, paste in the CSS I provided above and save the file in the same directory
Edit light.css and dark.css add this line to both of them @import "./custom.css"; or whatever your file name is and save.
(Optional - but highly recommended) open README.md in your favorite text editor