html - Bootstrap 3 checkbox center alignment and float: none seems to be ignored in IE -
first of here bootply sandbox: demo of issue. rendered expected in chrome , ff, float: none
seems ignored in ie.
steps:
the thing i've added basic starter bootply template following markup:
<div class="checkbox"> <input id="mycheckbox" style="float: none;" type="checkbox"> <label for="mycheckbox">my checkbox</label> </div>
this div inside , original <div class="text-center">
text and checkbox horizontally center aligned... if apply float: none
input element.
the problem in ie (all versions including 11) float: none
seems ignored, checkbox still aligned left, way far label. issue detected in pretty complex page used kendo, bootstrap, custom bootstrap theme (inspinia) + custom styles, i've succeded isolate in simple bootstrap demo.
in pictures:
correct rendering in chrome , ff:
very same markup incorrect rendering in ie 11:
missed something? have checkbox center aligned. margins not option, because page should responsive, , container resized.
i not sure why works in chrome , ff , not in ie, , browser "right" (probably not ie i'm guessing...), problem in ie position: absolute
checkbox gets boostrap css. if add position: relative
checkbox in addition float: none
rendered expected in ie well.
Comments
Post a Comment