This is a migrated thread and some comments may be shown as answers.

Bootstrap Form Layout is not working

8 Answers 574 Views
Window
This is a migrated thread and some comments may be shown as answers.
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Robert Madrian asked on 10 Nov 2016, 05:12 PM

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

8 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 14 Nov 2016, 09:11 AM

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
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 14 Nov 2016, 02:03 PM

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

 

0
Ianko
Telerik team
answered on 15 Nov 2016, 09:05 AM

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
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 15 Nov 2016, 09:43 AM

Hi Ianko,

Have you testet this with my sample app?

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

robert

0
Ianko
Telerik team
answered on 15 Nov 2016, 02:34 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 15 Nov 2016, 02:52 PM

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

robert

0
Accepted
Ianko
Telerik team
answered on 15 Nov 2016, 03:23 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 15 Nov 2016, 04:28 PM

Hello Ianko,

Now I understand - thanks for the Explanation!

Tags
Window
Asked by
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Answers by
Ianko
Telerik team
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Share this question
or