CODEWITHSUNDEEP
jqueryjquery-mobile
wtjones
wtjones

Reputation: 4160

How to remove padding and border around input tag in listview?

In jQuery Mobile I am trying to put a checkbox inside of a listview item. I want to remove the extra padding on the top/left/bottom as well as the rounded border. I wish to retain the right arrow of the anchor tag.

I managed to remove some of it by clearing the padding of the anchor tag. I have tried inspecting the elements in firefox and chrome but cannot figure out what is adding the space. It almost seems that the input tag is causing more padding of the parent.

<ul data-role="listview" data-inset="false" data-filter="true">
  <li>
    <a href="#">Normal item</a>
  </li>
  <li>
    <a href="#" style="padding-top:0px;padding-left:0px;padding-bottom:0px;">
      <fieldset data-role="controlgroup">
        <label ><input type="checkbox" name="checkbox-0" />With Checkbox</label>
      </fieldset>
    </a>
  </li>
  <li>
    <a href="#">Normal item</a>
  </li>
</ul>

Here is a fiddle to demonstrate: http://jsfiddle.net/HPGGk/7/

UPDATE: I think I may be close. I determined the fieldset is adding the padding. I tweaked the margin and now I just need to remove the border: http://jsfiddle.net/HPGGk/8/

Upvotes: 0

Views: 1280

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Take a look at this examples, I made them few weeks ago for some else but they should work for you:

Example 1: Listview with classic check box:

https://stackoverflow.com/a/13564924/1848600

Example 2: Listview with jQM look check box:

https://stackoverflow.com/a/13634738/1848600

Worst case scenario send me a msg and I will rebuild your example.

Upvotes: 1

Related Questions