How to display a fixed tabstip content height?

[Francis]

I need to have a fixed tabstip content body instead of collapsing based on the content size. Like minimum height or fixed height with scrollbars on overflow.

[Alexander]

Hi Francis,

In general, the TabStrip content containers are scrollable by default if the . Hence, this allows the widget to display scroll bars based on whether it has a fixed height or holds large content that cannot fit.

Having this in mind, you can set the fixed height of the content by using one of the following approaches:

• Through the .ContentHtmlAttributes() configuration option for each of TabStrip Items. You can review this Telerik REPL example for a visual illustration:

    @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          ...
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Paris")
                  .Selected(true)
                  .Content(@<text>
                    <div class="weather">
                        <h2>17<span>&ordm;C</span></h2>
                        <p>Rainy weather in Paris.</p>
                    </div>
                    <span class="rainy">&nbsp;</span>
                  </text>).ContentHtmlAttributes(new {style="height:50px"});

          })
    )

• By adjusting the CSS styles of the "k-content" class generated by Kendo. Note that this approach will apply the heigh to all TabStrip contents respectively. You can review this Telerik REPL example for a visual illustration:

    #tabstrip > .k-content{
        height:200px;
    }

Personally, I would go with the first approach, as it gives more control over the stylization of a particular Tabstrip item.

I hope you find this helpful. If any further questions arise do not hesitate to ask.

Regards,
Alexander
Progress Telerik

[Francis]

I agree the first approach is better. Thanks, Alexander