Tabstrip containing bootstrap columns

Question

I have a Kendo tabstrip and I'm trying to put two divs with the col-md-6 class side by side inside a tabstrip item. Instead of having 2 columns, they stack on top of each other. If I change any of them to col-md-5 or smaller, they work correctly. Has anyone had this problem and found the culprit?

Answer 1

This might be more of a 'hack' than a fix, but this is how we got around it

create a class, lets call it boxFix

.boxFix *,
.boxFix *::before,
.boxFix *::after {
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

Then for the kendo tab strip

<div id="tabstrip">
<ul>
    <li class="k-state-active">
        tab 1
    </li>
    <li>
        tab 2
    </li>
    <li>
        tab 3
    </li>
        Sydney
    </li>
</ul>
<div>
    <div class="boxFix">
    <!--bootstrap grids work again-->
    </div>                        
</div>
<div>
    <div class="boxFix">
    <!--bootstrap grids work again-->
    </div>                        
</div>
<div>
    <div class="boxFix">
    <!--bootstrap grids work again-->
    </div>                        
</div>

Like I said this is probably more of a hack... but I hope it helps.

Answer 2

I was experiencing the same issue as OP; however, I am using the Telerik MVC wrappers which already place a k-content class on the tab contents div. Therefore, I implemented Josh's suggestion by reusing the Telerik / Bootstrap classes instead of creating a new class.

.k-content > .row > *,
.k-content > .row > *::before,
.k-content > .row > *::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 3

I had the same problem and solved it using http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout

Here is a working sample http://dojo.telerik.com/@Xavier/iYAW/2