Bootstrap Form Layout is not working

[Robert Madrian]

Hi,

I have the Problem that my form layout (Bootstrap) is not working in Kendo MVC Window but everywhere else...
(the Content is loaded with Ajax as an PartialView)

see attached Pictures:

• popup1.jpg and popup2.jpg is in Kendo window and doesn't work
• popup3.jpg and popup4.jpg in normal page and it works

I have set the following in my CSS:

*, :before, :after
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* set a border-box model only to elements that need it */

.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.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
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[Ianko]

Hello Robert Madrian,

 

Try out if enabling the iframe content solves the case: http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/WindowBuilder#methods-Iframe(System.Boolean).

 

Note that using the Kendo Window with a div does not open a new document with its own view port, but using a div popup with  the view port of the main document.

 

If, however, the suggestion above does not help, please provide some code examples of the case you have so that I could try to recreate it locally and investigate it properly. 

 

Regards,
Ianko
Telerik by Progress

[Robert Madrian]

Hi,

IFrame is not an Option because I want to load a partialview - don't now what's going on but in the Project - which you can download at http://www.madrian.at/aspnet-mvc.zip - you can see the difference between the Window Layout and the main layout.
Start the project (Telerik Northwind sample) swicth to "About" and you see a form which works as expected (resize the window) after that click on "openwindow" button and you can see the difference...

robert

 

[Ianko]

Hello Robert,

Thanks for the sample. The problem experienced is due to differences of the box-sizing in Kendo Window and Bootstrap' s form decoration. 

Kendo Window depends on content-box sizing. Whereas Bootstrap, on border-box. 

Therefore, the solution for your case is to add an additional CSS rule to set the contents of the form to be decorated with border-box sizing:

.k-window .main-section-content * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Regards,
Ianko
Telerik by Progress

[Robert Madrian]

Hi Ianko,

Have you testet this with my sample app?

for me it makes no difference to add your CSS rule!

robert

[Ianko]

Hello Robert,

 

Yes, I tested the suggested CSS rule against the project linked. Here you are a screencast for comparison: http://www.screencast.com/t/gX8wkBoDqUTl.

 

Regards,
Ianko
Telerik by Progress

[Robert Madrian]

The Problem Comes up if you resize the popup window - see here: http://www.screencast.com/t/suudFh6O

robert

[Ianko]

Hello Robert,

As previously described, using the Kendo Window (or any other HTML popup component) will not bring up the same results as with the native browser window. 

The Bootstrap CSS utilizes media queries to provide the responsiveness of the HTML elements. This media queries listen to the view port of the browser. Not the parent HTML element. 

Using an HTML popup element, media queries does not affect the inner DOM as resizing the popup does not change the browser's view port.

Therefore, to have responsiveness in popup elements you should implement your own CSS that changes the decoration of the HTML elements according to the size of the popup element. 

A similar discussion on the same topic is also available here: http://stackoverflow.com/questions/39596929/can-media-query-be-used-in-a-pop-up-window. You might be able to get some ideas of handling this case from there.

Regards,
Ianko
Telerik by Progress

[Robert Madrian]

Hello Ianko,

Now I understand - thanks for the Explanation!