list items and buttons drawn on top of each other

[agcolom]

Hi,

There seem to be inconsistencies in the way lists and buttons are drawn when mixed together: split button lists are drawn after button (with a vertical gap) while basic linked lists are drawn on top of the bottom of buttons... and this regardless whether buttons are in layout grids or not. Also, buttons placed after lists go over the bottom of the last list item, and in case of split button lists, they are over the text, but behind the images/icons.

See at http://jsfiddle.net/agcolom/qZGyk/11/

Not a major problem as it is always easy to add some vertical space before or after elements, but just wondered whether you were aware of this.

Thanks,

Anne

[MauriceG]

It seems, the jquery-mobile-team becomes more space-economic ...
If you work consistent with divs as controlgroup, this issue don't take place.
I've added some controlgroups to your code: http://jsfiddle.net/MauriceG/96XuC/

[toddparker]

I just added a blurb to the lists into page to mention why this happens. In a nutshell, we have 15px of padding on the content div to give us consistent spacing for all content and widgets. This works great for every widget except full width lists that are supposed to to edge-to-edge. For this case, we add -15 margins to lists to negate the padding. Not normally a problem because it's best practice to use a full width list by itself, maybe with toolbars. If lists are embedded as a content module with other widgets, the inset lists are usually a better idea.

http://jquerymobile.com/test/docs/lists/docs-lists.html

This is good to document, thanks for the nudge.

[agcolom]

Brilliant :-) I have starting preparing my lectures on JQM, so I am going through the doc in detail :-) Hope it is ok to report doc issues/missing info this way?

Thanks again,

Anne

[agcolom]

Hi Again, I've just had one more look at the http://jsfiddle.net/MauriceG/96XuC/ that @MauriceG produced, with the addition of controlgroup divs around the lists. I thought control groups were just for buttons, checkboxes, radio buttons, etc. but the result is really interesting: The 1st and last list items get rounded corners. This is the perfect intermediate state between a basic list with data-role=listview and an inset list. Thanks for the tip :-)

[toddparker]

Yes, please do. I'm trying to update the docs for 1.0 so flag issues or make changes and submit pull requests.

On Oct 16, 2011, at 3:44 AM, "Anne-Gaelle Colom" reply@reply.github.com wrote:

Brilliant :-) I have starting preparing my lectures on JQM, so I am going through the doc in detail :-) Hope it is ok to report doc issues/missing info this way?

Thanks again,

Anne

Reply to this email directly or view it on GitHub:
#2715 (comment)

[toddparker]

@agcolom - great to hear that works. Unintended, but ti makes sense.