How to set the Tab Panels height to stretch row's height

Support
#1

Hello,

I’m having trouble to set the content panel’s height of the Tabs element to stretch the remaining row’s height.
Is there a way to achieve that?
I tried everything that I found researching to no success :frowning:

Can you guys help me?

Thanks in advance.

#2

Hey @rodrigo.ramos,

It’s possible using custom CSS. Before I give you the guide though, please note that the Tabs element was not meant for this setup and custom coding is outside the scope of our support. What I’m about to share should only help to get you started. Issues and enhancements would be your or your developer’s responsibility. With that bit cleared, please follow the steps below:

  1. Your columns must first be equal in height to achieve this so please follow the Equal Height Columns CSS alternative snippet at https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272

  2. Then in the Tabs Element CSS, add this code:

$el {
  height: 100%;
}
$el .x-tabs-panels {
  height: calc( 100% - 67px);
}

The 67px in that code is the height of your Tabs List. You can get that using the element inspector of the browser.

You can see the this method works in this video

Hope that helps and thank you for understanding.

1 Like
#3

Thanks! That solved my problem :slight_smile:

#4

You are most welcome. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.