I am trying to remove padding from jquery mobile checkbox so that its align left: 0px however i cant get it to work. here is a JSFiddle of my problem: http://jsfiddle.net/jGhqS/4/
How do I align jquery mobile checkbox fully to the lefT?
Add a comment
|
1 Answer
The easiest way to find out how is to open up your console on your browser, inspect the checkbox and see what other styles are being applied to the checkbox
jQuery mobile created its fancy styles by appending and wrapping HTML around what you make, so your checkbox input and label become
<div class="ui-checkbox">
<input id="rememberCheck" type="checkbox" checked="">
<label id="rememberLb" for="rememberCheck" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">CHECK BOX</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"> </span>
</span>
</label>
</div>
So to remove the spacing I copied jQuery mobile's style and changed the spacing to make the margin on the left smaller
.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {
left: 5px;
}
Like this - http://jsfiddle.net/jGhqS/6/
