After trying the Bootstrap method [3] without success, I am now implementing the radios according to approach [1]. Even after applying the fix for box-sizing as suggested in [2], it doesn't seem to resolve the issue.
<div class="panel panel-default">
<div class="panel-heading">
Insert heading here
</div>
<div class="panel-body">
<div class="form-horizontal">
<form >
<div class="form-group">
<label class="col-md-2">
Group name
</label>
<div class="col-md-9 col-md-offset-1">
<div class="form-group fix-kendo-sizing">
<input type="radio" id="causeRadio1" class="k-radio" name="fieldName" checked="">
<label class="k-radio-label" for="causeRadio1">Label value 1</label>
</div>
<div class="form-group fix-kendo-sizing">
<input type="radio" id="causeRadio1" class="k-radio" name="fieldName" checked="">
<label class="k-radio-label" for="causeRadio1">Label value 2</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Attached are :
<link href="@Href("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css"/>
<link href="@Href("~/Content/bootstrap-kendo-fix.css")" rel="stylesheet" type="text/css"/>
The content of bootstrap-kendo-fix.css is
.form-control.k-widget
{
padding: 0;
}
.fix-kendo-sizing,
.fix-kendo-sizing input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Appreciate any assistance!
References:
- [1]: Kendo UI Radios documentation at http://docs.telerik.com/kendo-ui/web/appearance-styling#checkboxes-and-radio-buttons
- [2]: Instructions for fixing
box-sizingin Kendo from http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout - [3]: Details about the Bootstrap approach at http://getbootstrap.com/css/#forms-controls