Question

I have a list view in jQuery Mobile with delete buttons in them.

<ul data-role='listview' class='animalList'>
    <li data-animal-prey-id='50'>Elephant<a data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></li>
    <li data-animal-prey-id='50'>Rhino<a data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></li>
    <li data-animal-prey-id='50'>Ostrich<a data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></li>  
</ul>​

Why are the delete buttons displaying so hugely? I want them to be small buttons to the right of the animal names.

Here is what I mean.
http://jsfiddle.net/z2nFK/

Answer 1

There are a number of issues with the way you have your fiddle set up.

1. Your using JQM version 1.1 for your css but using JQM version 1.0.1 for your js.
2. Also JQM 1.0.1 is not compatible with JQuery 1.7.2 and has some known issues.
3. Your listview is not formatted correctly.

Here is an example of all of this fixed. http://jsfiddle.net/codaniel/47SvT/1/ Just hit the fork button on the top to make your own version of this fiddle.

Notice that I used the split listview instead of the default one. I believe this may work better for your situation. Also note that both the animal and the delete is wrapped inside an <a> tag. I hope this helps!