Search code examples
c#asp.net-mvctwitter-bootstrapkendo-uikendo-window

Styling Kendo Window's content with Bootstrap


I have a generic Kendo Window that I call for different partial views. I can't style contents using bootstrap, as it causes different layouts in different browsers and elements are always cluttered.

This is a sample:

<div class="form-group form-inline">
    <div class="line">
        <div class="col-xs-6">
            @Html.LabelFor(m => m.2, new { @class = "col-xs-4 control-label" })
            @Html.DisplayFor(m => m.2)
        </div>
        <div class="col-xs-4">
            @Html.LabelFor(m => m.3, new { @class = "col-xs-4 control-label" })
            @Html.DisplayFor(m => m.3)
        </div>
    </div>
    <div class="line">
        <div class="col-xs-6">
            @Html.LabelFor(m => m.4, new { @class = "col-xs-4 control-label" })
            @Html.DisplayFor(m => m.4)
        </div>
        <div class="col-xs-4">
            @Html.LabelFor(m => m.5, new { @class = "col-xs-4 control-label" })
            @Html.DisplayFor(m => m.5)
        </div>
    </div>
</div>
<div class="clearfix">&nbsp;</div>
<div class="clearfix">&nbsp;</div>
@(Html.Kendo().Grid<Class...>()
....

And line:

.line{
    line-height: 20px;
}

Am I missing something? I just want to have a 2-column layout. Can you give me an example please?


Solution

  • I don't know why, but I should use col-xs-5. Also, to keep elements inside a tab strip I have to put them inside a container.

    <div class="container-fluid">
        <div class="form-group form-inline col-xs-12">
            <div class="col-xs-5"></div>
            <div class="col-xs-5"></div>
        </div>
        <div class="form-group form-inline col-xs-12">
            <div class="col-xs-5"></div>
            <div class="col-xs-5"></div>
        </div>
    ......
    </div>
    

    UPDATE I found the solution at their documents.

    First you need to add the following references.

    <link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.common-bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.bootstrap.min.css">
    

    And then add the following CSS to your site.css and include it in the page:

    /* reset everything to the default box model */
    
    *, :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;
    }
    

    And everything works fine, you should be able to use the following:

    <div class="container-fluid">
        <div class="form-group form-inline col-xs-12">
            <div class="col-xs-6"></div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group form-inline col-xs-12">
            <div class="col-xs-6"></div>
            <div class="col-xs-6"></div>
        </div>
    ......
    </div>