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

[Jason Piecora]

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.

 

[Patrick | Technical Support Engineer, Senior]

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

 

 

[Jason Piecora]

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

 

[Konstantin Dikov]

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