CODEWITHSUNDEEP
listviewjquery-mobilebutton
ross
ross

Reputation: 812

JQueryMobile Button/Listview Overlap

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

Upvotes: 1

Views: 995

Answers (1)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

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.

Upvotes: 1

Related Questions