How to adjust RadzenTabs TabPanel height

Radzen.Blazor Components
1

Hi,

I am trying to use the RadzenTabs component, but I have trouble setting the correct height for the tabpanels. When I use the following:

<RadzenTabs Style="height:100%;">
   <Tabs>
       <RadzenTabsItem Style="height:100%;" Text="TabOne">
           <div class="container-fluid" style="height:100%">
               <div class="row">
                   <p>SampleParagraphOne</p>
               </div>
               <div class="row">
                   <p>SampleParagraphTwo</p>
               </div>
           </div>
       </RadzenTabsItem>
       <RadzenTabsItem Style="height:100%;" Text="TabTwo">
           <div class="container-fluid" style="height:100%">
               <div class="row">
                   <p>SampleParagraphThree</p>
               </div>
               <div class="row">
                   <p>SampleParagraphFour</p>
               </div>
               <div class="row">
                   <p>SampleParagraphFive</p>
               </div>
           </div>
       </RadzenTabsItem>
   </Tabs>
</RadzenTabs>

This renders the following HTML:

image
image1094×384 17.8 KB

The height of the <div class="rz-tabview-panels> seems to be set to 100%, but the height of the <div class="rz-tabview-panel> seems to depend on the combined height of the child elements. Is there a way to set the height of the <div class="rz-tabview-panel> to 100%?

2

You can use a CSS selector set whatever height you need:

.rz-tabview-panel {
  height: 100% !important;
}
3

That worked perfectly, thanks!