dev520 dev520 - 3 months ago 9
CSS Question

bootstrap 3 radio button broke IE

<form method="post" role="form" class="form-horizontal">
<div class="form-group">
<div class="radio">
<label class="control-label col-sm-2">
<input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="startDate">
</div>
<div style="float:left">:</div>
<div class="col-sm-3">
<input type="text" class="form-control" id="endDate">
</div>
</div>
</div>




My radio button display normal with chrome, edge, ff, but in old IE its broken - button and label not close together.

enter image description here

I try to use jsfiddle but radio not display when I use IE.
plz help me.

https://jsfiddle.net/pLvop1ws/2/

Answer

Remove "control-label" class and allign
Working code:

<form method="post" role="form" class="form-horizontal">
    <div class="form-group">
        <div class="radio">
            <label class="col-sm-2" style="padding-left:10%">
                <input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="startDate">
            </div>
            <div style="float:left">:</div>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="endDate">
            </div>
        </div>
    </div>
</form>
Comments