css - Weird style behavior when (not) using ng-repeat -
i need display checkbox list bootstrap modal. using angular ng-repeat display various checkboxes , working fine:
<label class="checkbox-inline" ng-repeat="l in ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"> <input type="checkbox" value="{{ l }}" /> {{ l }} </label>
then thing changed manually creating checkboxes:
<label class="checkbox-inline"> <input type="checkbox" value="a" /> </label> <label class="checkbox-inline"> <input type="checkbox" value="b" /> b </label> ....
and there little space after letters break style.
that may stupid thing don't see change in style comes from! has idea why there space when not using ng-repeat ?
here fiddle https://jsfiddle.net/4hkw8h43/ first button open modal without ng-repeat , second ng-repeat...
as have found out, white-space issue occurs when using display: inline-block;
align stuff horizontally. cannot tell why happens in case, how fix it. fix useful in future.
to fix it, implement following:
.whitespace-eliminator { font-size: 0; } .whitespace-eliminator label { font-size: 14px; }
https://jsfiddle.net/4hkw8h43/2/
so basically, setting font-size: 0;
on parent makes white-space vanish visually. afterwards have reset font-size of child elements still have font-size: inherit;
internally otherwise.
Comments
Post a Comment