Getting The Accordion Height To Fit Row Height - Question | JoomShaper

Getting The Accordion Height To Fit Row Height

PS

Paul Scarnegie

SP Page Builder 2 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.

0
7 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #14477

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

0
PS
Paul Scarnegie
Accepted Answer
2 years ago #14634

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #14893

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

0
PS
Paul Scarnegie
Accepted Answer
2 years ago #14897

Details provided.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #15174

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;
}
0
PS
Paul Scarnegie
Accepted Answer
2 years ago #15222

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!

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #15303

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
0