javascript - jquery mobile collapsable checkbox list -
I've created a compressed checkbox list inside a popup using jquery mobile.
The problem is that there is a blank space on the left side of the list item and checkboxes (spaces) how can I get rid of this empty space, and keep the 100% check box in the consumption container? Thank you
Markup given inside your popup like this:
& Lt; Div data-role = "compressed" data-abbreviated = "wrong" & gt; & Lt; H4 & gt; Title & lt; / H4 & gt; & Lt; Ul data-roll = "list view" id = "myList" & gt; & Lt; Li & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "checkbox-0" /> Check me & lt; / Labels & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "checkbox-1" /> Check me & lt; / Labels & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "checkbox-2" /> Check me & lt; / Label & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;
You can add some CSS rules to get rid of padding and spherical corners:
#myList li {padding: 0; Border: 0! Important; } #myList li .ui-checkbox {margin: 0; } #myList li .ui-checkbox label {boundary-radius: 0! Important; }
Here is a
Comments
Post a Comment