Bootstrap grid system is not working

4 posts, 0 answers
  1. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 14 Feb 2017 Link to this post

    The Boostrap grid system gives wrong result in a Window.
    The grid seems to have only 9 columns.

    My View :

    @(Html.Kendo().Window()
        .Name("window")
        .Title("My window")
        .Width(400)
        .Content(@<text>
        <div class="row">
          <div class="col-md-3">
            First col
          </div>
          <div class="col-md-3">
            Second col
          </div>
          <div class="col-md-3">
            Third col
          </div>
          <div class="col-md-3">
            Fourth col
          </div>
        </div>
        </text>)
    )

    The result is shown in the png file.

    Any suggestions will be very appreciated.

  2. Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 16 Feb 2017 Link to this post

    Extension settings

    Hello Michel,

    As noted in this article on using Kendo UI with Bootstrap, Kendo UI widgets use content-box box model whereas Bootstrap uses border-box. In order to utilize the Bootstrap grid system with Kendo UI widgets you need to reset the box sizing to content-box. Have a look at this dojo example for a demonstration: http://dojo.telerik.com/eWOGO

    I prepared it using your code with the addition of a .container-fluid wrapper element. Please note the added CSS rules.

    I hope this helps.

     

    Regards,
    Orlin
    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.
  3. Matthew
    Matthew avatar
    14 posts
    Member since:
    Oct 2018

    Posted 10 Sep 2019 in reply to Orlin Link to this post

    Did something change in kendo recently?
    The dojo does not show the columns as I expected.
  4. Dimitar
    Admin
    Dimitar avatar
    806 posts

    Posted 12 Sep 2019 Link to this post

    Hello Matthew,

     

    The viewport of the right-side of the Dojo sandbox is too small for the col-md size. I assume that this is the reason as to why you are not able to see the columns in the Window.

    Just open the fullscreen version of the Dojo and you will be able to see the columns rendered correctly, as the viewport is bigger:

    Regards,
    Dimitar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top