CSS properties in Kendo TabStrip

4 posts, 1 answers
  1. Kay
    Kay avatar
    5 posts
    Member since:
    Apr 2016

    Posted 19 Apr Link to this post

    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?
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 19 Apr Link to this post

    Hi Kay,

    All inline CSS styles can be overwritten by adding !important to the rule.

    Regards,
    Magdalena
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kay
    Kay avatar
    5 posts
    Member since:
    Apr 2016

    Posted 19 Apr in reply to Magdalena Link to this post

    Thank you Magdalena.

    So there is currenty no possibility to change the display property in code? I understand your suggestion is rather a bad practise workaound.. But if there is no other way, I am happy to take that.

    Kind regards

  5. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 22 Apr Link to this post

    Hi Kay,

    We are afraid that this is the only possible solution for the issue.

    Regards,
    Magdalena
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top