Add scroll only for a tab content but not for a tab label in Clarity Tabs

Question

I have a tab with long content in the project (StackBlitz ref is here ).

So the scroll appears.

The corresponding code for it is

<div class="content-container">
        <div class="content-area">

            <clr-tabs>
                <clr-tab>
                    <button clrTabLink id="tab1-link">Tab1</button>
                    <clr-tab-content id="tab1-content" *clrIfActive="true">
                        ...
                    </clr-tab-content>
                </clr-tab>
                <clr-tab>
                    <button clrTabLink id="tab2-link">Tab2</button>
                    <clr-tab-content id="tab2-content" *clrIfActive>
                        Content2
                    </clr-tab-content>
                </clr-tab>
            </clr-tabs>

        </div>
    </div>

The problem is that the scroll covers tab labels and tab content. But I need it to cover only tab content so the tab labels would stay if I scroll down.

I tried to add the following styles to fix it

.content-area {
  overflow: hidden !important;
  height: 100%;
}

#tab1-content, #tab2-content {
  height: 100%;
  overflow: auto;
}

But this resulted in scroll disappearing at all. How can I add the scroll only for a tab content?

Answer 1

I'm afraid I couldn't work out enough from your code snippet so looked at the code in Stackblitz. In that, Tab1 and Tab2 are list elements in an unordered list with class nav.

Moving this nav ul out of the content-container div and putting it immediately below the header-2 header element gives you what I think you need, the content-container div fills up the remainder of the main container and scrolls with the Tab list elements remaining fixed above.

This may just be luck - in that all the required flex-related settings are already in place.

Answer 2

I found the following solution. I need to add to parent component content-area which contains all tabs the overflow property.

.content-area {
  overflow: hidden ;
}

It removes the current scrollbar. After that we can found the height of above elements using Chrome Dev Tools.

Now we should wrap the tab content into another div with some class (eg mytab-content ).

    <clr-tab-content id="tab1-content" *clrIfActive="true">
        <div class="mytab-content">
        .......
        </div>
    </clr-tab-content>

And finally we should add the following styles for that class

.mytab-content {
  height: calc(100vh - 60px - 36px);
  overflow: auto;
}

It will add scroll only for tab content.