Bootstrap row in the tabstrip does not have the traditional 12

4 posts, 0 answers
  1. Logan
    Logan avatar
    32 posts
    Member since:
    Apr 2013

    Posted 02 Apr 2015 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 03 Apr 2015 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. DGraham
    DGraham avatar
    31 posts
    Member since:
    Sep 2008

    Posted 04 Jun Link to this post

    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>

  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 07 Jun Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready