Bootstrap Form Layout is not working

9 posts, 1 answers
  1. Robert Madrian
    Robert Madrian avatar
    101 posts
    Member since:
    Apr 2003

    Posted 10 Nov 2016 Link to this post

    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;
    }
  2. Ianko
    Admin
    Ianko avatar
    1568 posts

    Posted 14 Nov 2016 Link to this post

    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.
  3. Robert Madrian
    Robert Madrian avatar
    101 posts
    Member since:
    Apr 2003

    Posted 14 Nov 2016 in reply to Ianko Link to this post

    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

     

  4. Ianko
    Admin
    Ianko avatar
    1568 posts

    Posted 15 Nov 2016 Link to this post

    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.
  5. Robert Madrian
    Robert Madrian avatar
    101 posts
    Member since:
    Apr 2003

    Posted 15 Nov 2016 in reply to Ianko Link to this post

    Hi Ianko,

    Have you testet this with my sample app?

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

    robert

  6. Ianko
    Admin
    Ianko avatar
    1568 posts

    Posted 15 Nov 2016 Link to this post

    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.
  7. Robert Madrian
    Robert Madrian avatar
    101 posts
    Member since:
    Apr 2003

    Posted 15 Nov 2016 in reply to Ianko Link to this post

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

    robert

  8. Answer
    Ianko
    Admin
    Ianko avatar
    1568 posts

    Posted 15 Nov 2016 Link to this post

    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.
  9. Robert Madrian
    Robert Madrian avatar
    101 posts
    Member since:
    Apr 2003

    Posted 15 Nov 2016 in reply to Ianko Link to this post

    Hello Ianko,

    Now I understand - thanks for the Explanation!

Back to Top