CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
user3666756
user3666756

Reputation: 53

jquery mobile collapsable checkbox list

I have made a collapsible checkbox list inside a popup using jquery mobile.

The problem is that the list items and checboxes have an identation to the left(blank space). How can I get rid of this blank space, and keep for the checkboxes 100% with of the collapsible container? thank you

Upvotes: 0

Views: 1148

Answers (1)

ezanker
ezanker

Reputation: 24738

Given markup inside your popup like this:

<div data-role="collapsible" data-collapsed="false">
    <h4>Heading</h4>
    <ul data-role="listview" id="myList">
        <li>
            <label>
                <input type="checkbox" name="checkbox-0" />Check me
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="checkbox-1" />Check me
            </label>
        </li>
       <li>
           <label>
               <input type="checkbox" name="checkbox-2" />Check me
           </label>
       </li>
    </ul>
</div>

You could add some CSS rules to get rid of padding and rounded corners:

#myList li {
    padding: 0;
    border: 0 !important;
}
#myList li .ui-checkbox {
    margin: 0;
 }
#myList li .ui-checkbox label {
    border-radius: 0 !important;
}

Here is a DEMO

Upvotes: 1

Related Questions