Scrollbars for Accordion items - how?

[SteveCole]

The content inside my accordion items are too long so they get cut off. How do I add scrollbars? In general, the CSS controlling that would be "overflow-y" but I haven't been able to figure out the correct CSS item to target inside Calcite to get this to work.

Thanks!

Steve

[KittyHurley · Accepted solution]

@SteveCole Within the Accordion Item you can add a parent element to house content and with CSS set a specified height and overflow-y value, similar to this example:

<style>
  .accordion-content {
    height: 15rem;
    overflow-y: scroll;
  }
</style>

<calcite-accordion>
  <calcite-accordion-item heading="My heading" description="My description">
    <div class="accordion-content">
       ...
    </div>
  </calcite-accordion-item>
</calcite-accordion>

[SteveCole]

Thank you, that did it. Sometimes it gets confusing when you're learning and throw together several different code snippits in order to piece together an app.

I'm a little leery about hard coding the height. When I didn't specify the height, it added the scrollbar but it would push other accordion items off the page because the accordion container had overflow hidden. Any thoughts on getting all this to play nice within the screen real estate? I have 6 accordion items and most of these will have content that needs scrolling.

Coming from the 3.x world and Dojo, I like how that accordion panel behaves and just pushes any unopened accordion items to the bottom and utilizes the available vertical screen space allotted for the overall accordion widget.