jQuery mobile listview and input button overlap

Question

I have the following to display a list of items and a button underneath the list. However the button is overlapping on top of the list. I must be not putting some kind of data-role or another one of their attributes on it.

<div data-role="content" data-theme="b">    
    <div>
       <ul id="listOfSheets" data-role="listview" >
     <li class="hidden"> <a href="_linkToSheet" data-ajax="false"> _sheetName</a></li>
      </ul>
    </div>  
    <input id="logout" type="button" value="Sign Out"    />
 </div><!-- /content -->

Here is what it looks like:

enter image description here

Phill Pafford · Accepted Answer · 2011-10-07 16:31:24Z

7

Live Example:

http://jsfiddle.net/B7nhA/ (the problem)
http://jsfiddle.net/B7nhA/1/ (the fix)

You're missing one of the attributes for the listview

data-inset="true"

HTML

<div data-role="content" data-theme="b">    
    <div>
        <ul id="listOfSheets" data-role="listview" data-inset="true">
            <li class="hidden"><a href="#" data-ajax="false">Link 1</a></li>
            <li class="hidden"><a href="#" data-ajax="false">Link 2</a></li>
            <li class="hidden"><a href="#" data-ajax="false">Link 3</a></li>
        </ul>
    </div>  
    <input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->

answered Oct 7, 2011 at 16:31

Phill Pafford

85.6k92 gold badges268 silver badges385 bronze badges

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

2 Comments

dev.e.loper Over a year ago

Yup this works. Link for reference jquerymobile.com/test/docs/lists/docs-lists.html

Marius Gedminas Over a year ago

But this changes the styling of the list: adds borders and margins on all sides.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

i experienced the same problem. Here is my fix.

 <style>
 .ui-content .ui-listview
    {
        margin-top: 5px;
        margin-bottom: 5px;
    } 
</style>

JsFiddle Demo

You dont need to modify your markups.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 6, 2012 at 7:07

Arvin

1,6062 gold badges18 silver badges20 bronze badges

Comments

user700284 · Accepted Answer · 2011-10-07 08:24:04Z

0

How about inserting an line break befor the button.Not a clean solution I think.But it will work.

<div data-role="content" data-theme="b">    
    <div>
       <ul id="listOfSheets" data-role="listview" >
     <li class="hidden"> <a href="_linkToSheet" data-ajax="false"> _sheetName</a></li>
      </ul>
    </div> 
    <br>
    <input id="logout" type="button" value="Sign Out"    />
 </div><!-- /content -->

answered Oct 7, 2011 at 8:24

user700284

13.7k8 gold badges42 silver badges74 bronze badges

1 Comment

dev.e.loper Over a year ago

Nope. Inserting a break does not fix it.

Andro Selva · Accepted Answer · 2012-10-21 05:53:13Z

0

I used padding to solve this kind of problems. See below I added padding to the list-container div.

<div data-role="content" data-theme="b">    
  <div style="padding-bottom:20px">
    <ul id="listOfSheets" data-role="listview" >
        <li class="hidden"><a href="#" data-ajax="false">Link 1</a></li>
        <li class="hidden"><a href="#" data-ajax="false">Link 2</a></li>
        <li class="hidden"><a href="#" data-ajax="false">Link 3</a></li>
    </ul>
  </div>  
<input id="logout" type="button" value="Sign Out"    />

Here is a DEMO

edited Oct 21, 2012 at 5:53

Andro Selva

54.4k53 gold badges195 silver badges244 bronze badges

answered Jun 20, 2012 at 12:10

slayergirl

293 bronze badges

Collectives™ on Stack Overflow

jQuery mobile listview and input button overlap

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related