How can we help you today?

How to Make Single Tabs in Tabs Design Element Equal and Full Height

In this article we will go over how to make the tabs in a Tabs design element full height and each tab will have equal height.



Prerequisites

1. You have inserted a Tabs element in your page

2. You have set its Tabs Location option to Left or Right. Your current tabs element should look like this: 



Step 1: Add class name to your Tabs design element


  • Open the Tabs element, go to the Custom CSS tab and add the class name - full-height-tabs - in the Class field:



  • Make sure you click Update after adding the class name.

Step 2: Add some custom CSS to the parent Row


  • Open your the settings for the Row containing your Tabs element. 


  • Copy the CSS code below and paste it in the Custom CSS text area in the Custom CSS tab.


.shortpoint-tabs {
  height: 100%;

  .full-height-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .sp-type-tab {
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      > div {
        flex-grow: 1;
        width: 100%;
      }
    }
  }
}



  • Click Update and Save/Publish the page. Refresh the page and the tabs should now have equal heights that together fills the height of the Tabs element

Result


Here is how the result will look:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 65 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more