Getting the Accordion height to fit Row height - Forum | JoomShaper
Staff replied SP Page Builder

Getting the Accordion height to fit Row height

Asked by Paul Scarnegie 5 years ago Last activity 5 years ago

Is it possible - through either the Addon settings or custom CSS - to make an Accordion Addon match the height of the entire row? More specifically, if there's 3 items in an Accordion, I want to make those 3 individual text areas expand vertically to fill the available vertical space of the row.

In the image below, the Accordion has a background color which shows that it's overall height matches the row, but I what I want is the individual items to expand vertically so that I don't see the color of the background at all. So essentially each Accordion item, when opened, will fill all the available vertical space available. I've tried CSS options but none of them seem to help - perhaps I'm applying them to the wrong elements.

7 replies

Oldest first Newest first Most helpful
Ofi Khan Staff
5 years ago

Hello Paul Scarnegie

Please use this CSS to Template Options -> Custom Code -> Custom CSS

.sppb-addon-accordion .sppb-panel-modern .sppb-panel-body{
    height: 50vh;
}

Change the height value according to your need.

Best regards

Paul Scarnegie Asked this
5 years ago

I know support typically doesn't provide CSS assistance so thank you in advance for going above typical support responses. I have myself been fighting to find the right objects to apply those styles too. Unfortunately, what you provided still doesn't appear to address the height issue. As you can see in the attached, the CSS has been applied to the global template but the height of the accordian is still only as high as the minimum to contain the displayed panel, and not expanding vertically to fill the vertical space of the row it's embedded into. That is, the "volunteer" box should be resting at the bottom of the vertical space. Thank you again for your assistance.

Ofi Khan Staff
5 years ago

Please share your administrator access here to check the issue. Use the Hidden Content box to share the credentials.

Paul Scarnegie Asked this
5 years ago

Details provided.

Ofi Khan Staff
5 years ago

I needed to modify it a little. I have added this CSS to Template Options -> Custom Code -> Custom CSS

.sppb-addon-accordion .sppb-panel .sppb-panel-body{
    height: 73vh;
}
Paul Scarnegie Asked this
5 years ago

That's great! It looks great. Thank you for going above and beyond with my support request. You're so much better at this than some of the others!

Ofi Khan Staff
5 years ago · edited

You are welcome.

I have a humble request. It would be very kind of you if you can manage some moment to give us feedback here:

  1. JED
  2. Trustpilot
Log in to reply.