Possible Kendo Window Issue with Bootstrap 3

[bjswick33]

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!

[Iliana Dyankova]

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

[bjswick33]

Thanks Iliana for the information.  I will correct my code where needed.

[JohnVS]

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?

[Iliana Dyankova]

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

[JohnVS]

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/

[Iliana Dyankova]

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

[JohnVS]

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

[Alex Gyoshev]

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

[Neil]

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);
    }
}