Possible Kendo Window Issue with Bootstrap 3

10 posts, 1 answers
  1. bjswick33
    bjswick33 avatar
    6 posts
    Member since:
    Jun 2011

    Posted 04 Dec 2013 Link to this post

    Hello all!

    I'm currently running into an issue with the latest version of Kendo UI (2013.3.1119).  In the previous version I used Kendo window as a form entry and used the bootstrap 3 form group as the layout.  My expected results are attached.  The code used inside the window is as follows.

    <div class="form-horizontal" role="form">
            <div class="form-group">
                @Html.Label("Entry Type", htmlAttributes: new { @class = "col-lg-2 control-label" })
                <div class="col-lg-10">
                    @(Html.Kendo().DropDownList()
                        .Name("ddlEntryType")
                        .HtmlAttributes(new { @required = "required", @style = "width: 100%" })
                        .OptionLabel("Select Course Type...")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .BindTo(new List<SelectListItem>() {
                            new SelectListItem() {
                                Text = "Manual",
                                Value = "Manual"   
                            },
                            new SelectListItem() {
                                Text = "Temporary Access",
                                Value = "Temporary"
                            }
                        })
                    )
                </div>
            </div>
            <div class="form-group">
                @Html.Label("Select Course", htmlAttributes: new { @class = "col-lg-2 control-label" })
                <div class="col-lg-10">
                    @(Html.Kendo().DropDownList()
                        .Name("ddlCourses")
                        .HtmlAttributes(new { @required = "required", @style = "width: 100%" })
                        .OptionLabel("Select Course...")
                        .DataTextField("Name")
                        .DataValueField("ID")
                        .DataSource(dataSource =>
                        {
                            dataSource.Read(read =>
                                {
                                    read.Action("GetCourseList", "Home", new { @personID = ViewBag.PersonID })
                                        .Data("filterCourses");
                                })
                                .ServerFiltering(true);
                        })
                        .Enable(false)
                        .AutoBind(false)
                        .CascadeFrom("ddlEntryType")
                    )
                </div>
            </div>
            <div class="form-group">
                @Html.Label("Completed Date", htmlAttributes: new { @id = "lblCompletedDate", @class = "col-lg-2 control-label" })
                <div class="col-lg-10">
                    @(Html.Kendo().DatePicker().Name("dpCompletedDate").Value(DateTime.Now))
                </div>
            </div>
            <div class="form-group">
                @Html.Label("Course Site", htmlAttributes: new { @class = "col-lg-2 control-label" })
                <div class="col-lg-10">
                    @Html.TextBox("txtCourseSite", "", htmlAttributes: new { @placeholder = "ex. Nationwide Children's Hospital, CITI, or OSU", @required = "required", @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-offset-2 col-lg-10">
                    <button type="button" class="btn btn-default" onclick="closeAddCompletedCourse(this);">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add</button>
                </div>
            </div>
        </div>

    After updating to the latest version I got a different result which is also attached.  What you will see is the horizontal grouping is now breaking in the window.  I did find a temporary fix which was to decrease the col size that is holding the control from 10 to 8.  The bootstrap grid is 12 so the previous code should have worked.  I'm just curious if I'm missing something or if this is an issue in the latest version of Kendo UI.

    Thanks in advance for your help!
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 06 Dec 2013 Link to this post

    Hello Brun,

    Actually Kendo UI provides integration with Twitter Bootstrap 3.0 with Q3 2013 official release (but not in previous versions). I checked the definitions of col-lg-2 and col-lg-10 and the total width is 100%, however there is padding applied to the aforementioned classes which causes the observed outcome. Hence I believe decreasing the col size is suitable in this situation.

    Regards,
    Iliana Nikolova
    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. bjswick33
    bjswick33 avatar
    6 posts
    Member since:
    Jun 2011

    Posted 06 Dec 2013 Link to this post

    Thanks Iliana for the information.  I will correct my code where needed.
  5. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 10 Dec 2013 Link to this post

    Bootstrap 3 grids are not working correctly inside of Kendo Windows, using version 2013.3.1119. It actually seems to be the <div class="row"> element that is causing problems inside a Window. See this JSFiddle. As long as the <div class="row"> is there, there is always a horizontal scroll bar at the bottom of the Kendo Window. I have not been able to remove this with lots of messing around with padding, margin, and such on the different elements involved. Any thoughts?
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 12 Dec 2013 Link to this post

    Hello John,

    It appears for some reason the jsFiddle example is missing - could you please send it again? This way I would be able to check what exactly is going wrong and advice you further. Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 12 Dec 2013 Link to this post

    Well, that's strange. I used the link tool in the Kendo editor to add the link. Here it is again:

    http://jsfiddle.net/WXj5E/1/
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 14 Dec 2013 Link to this post

    Hello John,

    Thank you for re-sending the jsFiddle example. The observed behaviour is due to the following CSS rule from Twitter Bootstrap;
    .row{margin-right:-15px;margin-left:-15px}
    Hence in order to remove the horizontal scrolbar you could use one of the following approaches: 
    • Set overflow-x: hidden to the window widget:
    #window{
       overflow-x: hidden;
    }
    • Set margin: 0 to the .row elements: 
    .row{
       margin:0px;
    }

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 17 Dec 2013 Link to this post

    If "Kendo UI provides integration with Twitter Bootstrap 3.0 with Q3 2013 official release," then why do Bootstrap 3 grids not work within Kendo Windows? Was that not tested? Or was Bootstrap 3 only integrated with Kendo in certain ways? I'm just confused by the fact that Kendo integrated BS3, but it's not working in certain areas. Can you help us understand that please?

    For anyone else coming here later, you can manually get the BS3 grid to work within Kendo Windows. What I did was to add this CSS:

    .k-window .row, .k-window .row * { box-sizing: border-box; }

    Don't have a clue if this will end up causing problems with elements inside the .row div, but at least Bootstrap .form-group div's fit perfectly within.

    I got this idea from reading the forum post at http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/general-discussions/do-you-plan-to-create-bootstrap-3-compatible-theme-.aspx
  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Dec 2013 Link to this post

    Hello John,

    We have evaluated the cost to support this, but at this time consider the use of Bootstrap / Foundation grids within a Kendo UI window unsupported. In order to support this, we will need to make either too big changes in our codebase that will hurt all users (like introducing huge selectors to handle that case) or add the bootstrap classes in our files, which is quite likely to be a breaking change (.row is a quite common selector to have).

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Neil
    Neil avatar
    1 posts
    Member since:
    Feb 2012

    Posted 26 Mar 2014 in reply to JohnVS Link to this post

    JohnVS's CSS got me started but caused problems with Kendo dropdown's inside the bootstrap grid. I limited the selector to just row and column classes and Kendo UI and Bootstrap are now getting along.

    .k-window .row {
        .box-sizing(border-box);
        .col-xs-1, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
            .box-sizing(border-box);
        }
    }
Back to Top
Kendo UI is VS 2017 Ready