LI's in tabstrip having width same as their outer div

4 posts, 0 answers
  1. Jason Piecora
    Jason Piecora avatar
    3 posts
    Member since:
    Apr 2010

    Posted 04 Mar Link to this post

    In your demo for Tabstrip, I see that the collapsible divs and the tabs (LI - Tab1 and Tab2) span beyond the UL and outer div (<div id="tabstrip">). Is there any way you can help me make it the same width? Also make the tabs (tab1 and tab 2) have a margin in between them.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#configuration-collapsible

    <div id="tabstrip">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
        </ul>
        <div>Content 1</div>
        <div>Content 2</div>
    </div>

     

    Thanks a lot in advance for you help.

     

  2. Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 04 Mar Link to this post

    Hi Jason,

    Please take a look at this example which shows how you can style the tabstrip with CSS.  

    Here is the CSS I used to set the width of the tabstrip and separate the tabs:
    <style>
    #tabstrip { /* tabstrip element */
        position: absolute;
        width: auto;
     }
         
    li { /*how to separate tabs*/
          margin-right: 20px !important;
        }  
         
    li:last-child {  /*last li has no margin-right*/
          margin-right: 0px !important;
    }
    </style>

    If you would like to find more information about CSS, W3Schools is a great guide.  

    Hope this helps!

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jason Piecora
    Jason Piecora avatar
    3 posts
    Member since:
    Apr 2010

    Posted 07 Mar in reply to Patrick Link to this post

    Hey Patrick,

    Thanks for your response. I have added some out of bound content in one of the tabs, which makes it spans out of the tabstrip. Can you help me fix the width in this scenario? I do not want width: 100%

    http://dojo.telerik.com/oHelo

     

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 09 Mar Link to this post

    Hi Jason,

    In order to prevent the panels to expand beyond the width of the tabs you need to have fixed width to the wrapper. For example:
    #tabstrip { /* tabstrip element */
        position: absolute;
        width: 400px;
     }

    Another option would be to use the initially calculated width (from the width: auto) and set that width to the wrapper:
    <script>
        $("#tabstrip").kendoTabStrip({
            collapsible: true
        });
       
      $("#tabstrip").width($("#tabstrip").innerWidth());
    </script>

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready