I got two checkbox which is working fine, but I face some CSS issues:
I made three screenshot of what I'm seeing (One in mozilla firefox 50.1.0, one in google chrome 55.0.2883.87 and one in Microsoft Edge 38.14393.0.0):
Firefox:
Chrome:
Edge:
There are the complete HTML inside the body element (which has no class): The <html>tag have those classes but I don't think it's relevant:
js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths
HTML:
<div class="container">
<form>
<span data-bind="visible: $data">
<fieldset class="well">
<div class="row form-group">
<div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: HasNoCodeBarreUnique"})</div>
<div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div>
</div>
<div class="row form-group">
<div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: IsInSystemeRemboursementReference" })</div>
<div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div>
</div>
</fieldset>
</span>
</form>
</div>
I omitted either the C# model property and the irrelevants classes in purpose.
All classes are from twitter-bootstrap-3 but vcenter:
.vcenter {
float: none;
display: inline-block;
vertical-align: middle;
margin-right: -4px;
}
I just want a standard checkbox like:
So how to render my checkboxes in a standard format ?
Aucun commentaire:
Enregistrer un commentaire