jquery-mobile - jquerymobile - jquery mobile online

jQuery vista de lista móvil y botón de entrada se superponen

Question

Tengo lo siguiente para mostrar una lista de elementos y un botón debajo de la lista. Sin embargo, el botón se superpone en la parte superior de la lista. No debo poner ningún tipo de papel de datos u otro de sus atributos en él.

<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 -->

Esto es lo que parece:

Answer 1

Ejemplo en vivo:

• http://jsfiddle.net/B7nhA/ (el problema)
• http://jsfiddle.net/B7nhA/1/ (la solución)

Te estás perdiendo uno de los atributos de la lista

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 -->

Answer 2

Experimenté el mismo problema. Aquí está mi solución.

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

Demostración JsFiddle

No necesita modificar sus marcas.

Answer 3

Qué tal si inserto un salto de línea antes del botón. No creo que sea una solución limpia. Pero funcionará.

<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 -->

Answer 4

Usé relleno para resolver este tipo de problemas. A continuación, agregué el relleno al div del list-container .

<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" />

1.

Aquí hay una DEMO