Forcing TabStrip to take up 100% of it's parent container

8 posts, 0 answers
  1. Jon Barron
    Jon Barron avatar
    24 posts
    Member since:
    Oct 2012

    Posted 14 Jun 2012 Link to this post

    I'm trying to get the tabstrip inner container to take up 100% of the height & width of the parent div it's in. Nothing I've tried seems to accomplish this.

    Please help!
  2.
  3. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 10 Jul 2012 Link to this post

    Jon,

    I am having a similar issue.   Anyone figure this out?

    I have the following markup:

    <div id="tabContainer" style="height: 500">
        <div id="tabDetail">
            <ul>
                <li class="k-state-active">Employee Management</li>
                <li>Transfer History</li>
                <li>Compensation</li>
                <li>Dashboard</li>
                <li>Reporting</li>
            </ul>
        </div>
    </div>

    and the corresponding code:

    $("#tabDetail").kendoTabStrip( {
        contentUrls: [
            "html/Workforce/Page1.htm",
            "html/Workforce/Page2.htm",
            "html/Workforce/Page3.htm",
            "html/Workforce/Page4.htm",
            "html/Workforce/Page5.htm",
            "html/Workforce/Page6.htm"
        ]
    });

    I would like not to have to be forced in to managing the resize if possible.

    Anyone?

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 12 Jul 2012 Link to this post

    Hi guys,

    To accomplish this you could use the following CSS:
    #tabstrip { /* tabstrip element */
        height: 500px;
        position: relative;
    }
     
    .k-tabstrip .k-content {
        position: absolute;
        top: 41px;
        bottom: 0;
    }

    As an alternative approach, instead of setting the tab strip's element height, I would suggest setting the height of the content. Thus way the tab strip's parent container will automatically resize.
    .k-tabstrip .k-content {
        height: 500px;
    }
     

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 12 Jul 2012 Link to this post

    Alexander,

    Thanks for this reply.   I will check it out.   I was hoping there was a way to do it where it would size as the window is re-sized rather than hard coding the height or adjusting via JS.   Is that possible?
  8.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 17 Jul 2012 Link to this post

    Hi Steven,

    This is possible, to achieve it I suggest modifying the styles in this way:
    #tabstrip { /* tabstrip element */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
    }
      
    .k-tabstrip .k-content {
        position: absolute;
        top: 41px;
        bottom: 0;
    }

    I hope this helps.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Gary
    Gary avatar
    28 posts
    Member since:
    Apr 2011

    Posted 03 Dec 2012 Link to this post

    Yes, this works but if you have a grid on the Tab that contains an embedded TabStrip in the detail Template as I have it tries to apply the .k-tabstrip .k-content settings to that as well, with bad consequences obviously.

    Any ideas how we just get the css: 

    .k-tabstrip .k-content {
        position: absolute;
        top: 41px;
        bottom: 0;
    }    

    To apply ONLY to the root #tabstrip ??
  13. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 05 Dec 2012 Link to this post

    Hello Gary,

    Of course, you can use a child selector instead of a descendant selector, and use the root TabStrip ID instead of its CSS class.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Will
    Will avatar
    4 posts
    Member since:
    Sep 2013

    Posted 15 Jan 2016 in reply to Alexander Valchev Link to this post

    This approach does not seem to work well if the tab strip is wrapped to more than one row. The top of the content must be relative to the bottom of the tab strip. Fixed at 41px doesn't work.

     My guess is, that similar to the Kendo Grid 100% height, you have to capture the resize event and explicitly recalculate the top of the content.

Back to Top