The spaces between jQuery mobile controlgroup

Question

I am trying to use the jQuery Mobile expandable widget. However, using the code directly from my site (in particular, Legend), I noticed that there are gaps between the control group.

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a" />
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a" />
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a" />
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

Is there any way to remove them? I tried to go by default to find out if there is an attribute that I can change, but I could not find anything. Here is my jsfiddle that shows spaces and my code. Any help would be greatly appreciated!

Answer 1

Gaps are the result of spaces and line breaks in html markup. This does it for me:

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label for="checkbox-1-a">One</label><input type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label for="checkbox-2-a">Two</label><input type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

jsFiddle

, html :

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input 
                type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label
                for="checkbox-1-a">One</label><input
                type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label
                for="checkbox-2-a">Two</label><input
                type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label
                for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>