TabStrip: Expand Element inside as Tab to the size of the Tab

1 Answer 65 Views
TabStrip
Hendrik
Top achievements
Rank 2
Bronze
Iron
Iron
Hendrik asked on 28 Jun 2024, 08:25 AM

What is the best way to resize a div within a TabStripPage to the size of the tab ?

I am still struggeling with css...

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Jul 2024, 07:05 AM

Hello Hendrik,

Normally, you only need a height for the TabStrip and a 100% height for the <div> inside the TabStrip, as in the snippet below. If you want the TabStrip to also expand, then you may need more styles on the TabStrip ancestors.

If your scenario is more complex, please provide a demo.

<TelerikTabStrip @bind-ActiveTabIndex="@ActiveTab" Height="600px">
    <TabStripTab Title="Tab 1">
        <div style="height:100%;background:#ffc;">This DIV will expand to fill the TabStrip</div>
    </TabStripTab>
    <TabStripTab Title="Tab 2">
        Content 2
    </TabStripTab>
    <TabStripTab Title="Tab 3">
        Content 3
    </TabStripTab>
</TelerikTabStrip>

@code {
    private int ActiveTab { get; set; }
}

 

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Tags
TabStrip
Asked by
Hendrik
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Dimo
Telerik team
Share this question
or