jQuery mobile listview and input button overlap - jquery-mobile

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"> _sheetName</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
Here is what it looks like:

Answer 1

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">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->

Answer 2

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.

Answer 3

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"> _sheetName</li>
</ul>
</div>
<br>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->

Answer 4

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">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
​​​
Here is a DEMO