Telerik Forums / UI for ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.

Bootstrap row in the tabstrip does not have the traditional 12

3 Answers 453 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Logan
Top achievements
Rank 1
Veteran
Logan asked on 02 Apr 2015, 03:16 PM
It appears that something with the tooltip is preventing the bootstrap row from sizing the 12 columns correctly and less then 12 seem to fit in a row by default.

You can see an email here: http://dojo.telerik.com/uCamu (you will need to expand the results side so the columns aren't stacked)

Thanks,
~L

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 03 Apr 2015, 02:27 PM
Hello Logan,

Please refer to the following documentation page:

http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout

Regards,
Dimo
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
DGraham
Top achievements
Rank 1
answered on 04 Jun 2016, 01:53 PM

What am I doing wrong here? Why do the columns oustide the tabstrip appear alongside each other as expected. Yet inside they appear below each other? (see attached screenshot)

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>Test</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
 
    <script src="@Url.Content("~/Scripts/kendo/2016.2.504/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.2.504/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.2.504/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.2.504/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                col-sm-6 outside tab (a)
            </div>
            <div class="col-sm-6">
                col-sm-6 outside tab (b)
            </div>
        </div>
        @(Html.Kendo().TabStrip()
            .Name("Test")
            .Animation(animation =>
              animation.Open(effect =>
                  effect.Fade(FadeDirection.In))
                            )
            .Items(tabstrip =>
            {
                tabstrip.Add().Text("General")
                    .Selected(true)
                    .Content(@<text>
                        <div class="row">
                            <div class="col-sm-6">
                                col-sm-6 inside tab (a)
                            </div>
                            <div class="col-sm-6">
                                col-sm-6 inside tab (b)
                            </div>
                        </div>
 
                    </text>);
            }
            )
        )
    </div>
</body>
</html>

0
Dimo
Telerik team
answered on 07 Jun 2016, 04:01 PM
Hello Darren,

The provided test page does not seem to follow the recommendations in the documentation article linked above. Please check the "Nest Widgets and Bootstrap Grid Layout" section and let me know if you have additional questions.

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout


Regards,
Dimo
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TabStrip
Asked by
Logan
Top achievements
Rank 1
Veteran
Answers by
Dimo
Telerik team
DGraham
Top achievements
Rank 1
Share this question
or