TabStrip content scrolling

1 Answer 117 Views
TabStrip
Paul
Top achievements
Rank 1
Paul asked on 22 Feb 2022, 02:20 PM
I am trying to set overflow:auto on the TabStripTab so that the scrollbar will be contained within each tab (I have some content as a header above the tabs so I do not want the scrollbars to be on the whole page).  I am having a lot of difficulty getting this to work.  Are there any suggestions for getting this to work?

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 25 Feb 2022, 06:50 AM

Hi Paul,

To make the TabStrip content scrollable, you need to set height to the TabStrip. Do it with via the Class parameter and a CSS height style.

The tricky part is how to define the TabStrip height as "expand to 100%, but minus the header height". There are two ways to do that:

  • Use a 100% high vertical Splitter with two panes - one with a fixed height and one with no height. Then use a 100% high TabStrip inside the bottom pane.
  • Use generic HTML elements and set the TabStrip height with calc().

Keep in mind that elements with percentage heights require their parents to have an explicit height.

<div class="body"> <!-- height: 100% -->

    <div class="page-header"> <!-- height: 60px -->
        This text does not scroll.
    </div>

    <TelerikTabStrip Class="tabstrip" /> <!-- height: calc(100% - 60px) -->

</div>

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Paul
Top achievements
Rank 1
commented on 25 Feb 2022, 04:36 PM

My problem is that I don't always know the height of the header.  I was trying to use a flexbox or grid to allow the tab contents to grow 100% and have the header be auto height.
Paul
Top achievements
Rank 1
commented on 25 Feb 2022, 04:46 PM

I also tried your example, and the whole page scrolls, not the tab's content.

app.css:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height:100%;
}

.body {
    height: 100%;
}

.tabstrip {
    height: calc(100% - 60px);
}

.page-header {
    height: 60px;
}

 

index.razor:

<div class="body"> <!-- height: 100% -->

    <div class="page-header"> <!-- height: 60px -->
        This text does not scroll.
    </div>

    <TelerikTabStrip Class="tabstrip" > <!-- height: calc(100% - 60px) -->
        <TabStripTab Title="Test">
            <div style="height:2000px"></div>
        </TabStripTab>
        <TabStripTab Title="Test 2"></TabStripTab>
        </TelerikTabStrip>
</div>

 

 

Dimo
Telerik team
commented on 25 Feb 2022, 09:22 PM

In a Blazop app there is (at least) one more element that needs a 100% height style in such a layout - the <app> or <div id="app"> element. Check the page HTML output with the DOM inspector.

The other problem is more tricky, if fixed dimensions cannot be set. I made some experiments, but wasn't able to achieve the desired layout with flexbox without an appropriate correct height for the TabStrip.

Paul
Top achievements
Rank 1
commented on 10 Mar 2022, 05:21 PM

Thanks for the help. 
Tags
TabStrip
Asked by
Paul
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or