This is a migrated thread and some comments may be shown as answers.

CSS properties in Kendo TabStrip

3 Answers 1159 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Kay asked on 19 Apr 2016, 09:31 AM

Hi there,
I am using a TabStrip and am struggeling with scrollbars within the tab strip content. I found out that I am able to solve this by using css style "display: inline-table" instead of "display: block".
Unfortunately I am not able to set this style in my code:

@(Html.Kendo().TabStrip()
                      .Name("tab1")
                      .HtmlAttributes(new {style = "height:auto" })
                      .Items(ts =>
                      {
                          ts.Add().Text("Text1").Enabled(true).HtmlAttributes(new { id = "item1"}).Content(@Html.Partial("_Form1", new Model1()).ToHtmlString());
                          ....
This will generate following markup structure:
<div class="k-tabstrip-wrapper">
<div class="k-widget k-tabstrip k-header k-floatwrap k-tabstrip-top">
<ul class="k-reset k-tabstrip-items">
....[some more ul]...
<div class="k-content k-state-active" id="tab1" style="display:block" role="tabpanel" aria-expanded="true">
...
The problem appears in the line above where display is set to "block". The browser shows:
element.style {
display: block;
}
1. I did not specify this style. I assume this is generated?
2. I cannot override this property using:
<style>
    .k-tabstrip .k-content.k-state-active {
        display: inline-table;
    }
</style>
3. Neither setting .Htmlattributes on the grid nor the tabstrip helps, as they're corresponding to parent divs.

Does anybody know how to do this?

3 Answers, 1 is accepted

Accepted