JQueryMobile Button/Listview Overlap

Question

In my experience, having a <ul> right above or below a button <a data-role="button">..</a> causes them to overlap. My workaround is to generously use <br>'s, but this seems like a broken workflow.

Does anyone know a fix to this overlap issue?

Here's a JsFiddle demonstrating my problem.

Here is the code used in the fiddle:

    <div data-role="content">
        <ul data-role="listview" data-theme="b">
            <li>Hello</li>
            <li>World</li>
        </ul>
        <a data-role="button" href="#">Give me my space!</a>

        <ul data-role="listview" data-theme="b">
            <li>Boring</li>
            <li>workaround</li>
        </ul>
        <BR>
        <a data-role="button" href="#">Give me my space!</a>
    </div>

Update: I played around a bit more, and making the listview inset fixed the overlap. Nonetheless, I would like a way to avoid overlapping without inset if anyone knows how! New JsFiddle

Frédéric Hamidi · Accepted Answer · 2013-04-13 16:24:19Z

1

It looks like an incorrect margin override in jQuery Mobile's CSS.

You can work around it by specifying:

.ui-content .ui-listview, .ui-panel-inner .ui-listview {
    margin-bottom: 1em;
}

However, this may conflict with other jQuery Mobile widgets (unless the margin override is a bug to begin with).

You can see the results in this updated fiddle.

answered Apr 13, 2013 at 16:24

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ross Over a year ago

Nice! I'll use this and keep my eye out for any side effects on other widgets

Collectives™ on Stack Overflow

JQueryMobile Button/Listview Overlap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related