jquerytwitter-bootstrapkendo-uikendo-gridkendo-template

2 col-md-6's not lining up side by side in my kendo grid detailTemplate

I am having an issue having my col-md-6's to line up side by side in my grid's detailTemplate.

If I wasn't doing this in a detailTemplate then it works fine, just not in here and I am not sure why 

$(document).ready(() => {
  var data = [{
      ID: 1,
      FirstName: "PersonA",
      LastName: "123"
    },
    {
      ID: 2,
      FirstName: "PersonB",
      LastName: "456"
    },
    {
      ID: 3,
      FirstName: "PersonC",
      LastName: "789"
    }
  ];


  $("#GridList").kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: {
        fields: {
          ID: {
            type: "number"
          },
          FirstName: {
            type: "string"
          },
          LastName: {
            type: "string"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "ID",
        title: "ID",
        hidden: true
      },
      {
        field: "FirstName",
        title: "FirstName"
      },
      {
        field: "LastName",
        title: "LastName"
      }
    ],
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    reorderable: false,
    groupable: false,
    resizable: true,
    columnMenu: false,
    change: function(e) {
      var row = $(this).closest('tr');
      var prev = row.prev();
      console.log(prev);
    },
    detailInit: function(e) {},
    detailTemplate: kendo.template($('#mytemplate').html()),
    height: 500

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script type="x-kendo-template" id="mytemplate">
  <div id="VIACInfoWrapper" style="height:300px; border:1px solid black">
    <div class="container-fluid">
      <div id="VIACIRow" class="row" style="background:fuchsia;">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-6" style="height:100px; background:yellow"></div>
            <div class="col-md-6" style="height:100px; background:blue"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<div id="GridList"></div>

Solution

  • This issue has to do with the use of conflicting box-sizing properties used by Kendo UI and bootstrap, which is described in this documentation.

    They provide some css rules to work around the issue, and they do appear to work when applied to your example:

    $(document).ready(() => {
  var data = [{
      ID: 1,
      FirstName: "PersonA",
      LastName: "123"
    },
    {
      ID: 2,
      FirstName: "PersonB",
      LastName: "456"
    },
    {
      ID: 3,
      FirstName: "PersonC",
      LastName: "789"
    }
  ];


  $("#GridList").kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: {
        fields: {
          ID: {
            type: "number"
          },
          FirstName: {
            type: "string"
          },
          LastName: {
            type: "string"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "ID",
        title: "ID",
        hidden: true
      },
      {
        field: "FirstName",
        title: "FirstName"
      },
      {
        field: "LastName",
        title: "LastName"
      }
    ],
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    reorderable: false,
    groupable: false,
    resizable: true,
    columnMenu: false,
    change: function(e) {
      var row = $(this).closest('tr');
      var prev = row.prev();
      console.log(prev);
    },
    detailInit: function(e) {},
    detailTemplate: kendo.template($('#mytemplate').html()),
    height: 500

  });

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
/* 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;
}
</style>

<script type="x-kendo-template" id="mytemplate">
  <div id="VIACInfoWrapper" style="height:300px; border:1px solid black">
    <div class="container-fluid">
      <div id="VIACIRow" class="row" style="background:fuchsia;">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-6" style="height:100px; background:yellow"></div>
            <div class="col-md-6" style="height:100px; background:blue"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<div id="GridList"></div>