jQuery мобильный просмотр списка и кнопка ввода перекрываются - PullRequest
Новая
       1

jQuery мобильный просмотр списка и кнопка ввода перекрываются

7 голосов
/ 07 октября 2011

У меня есть следующее для отображения списка элементов и кнопка под списком.Однако кнопка перекрывается в верхней части списка.Должно быть, я не ставлю какую-то роль данных или какой-либо другой их атрибут на нее.

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

Вот как это выглядит:

enter image description here

Ответы [ 4 ]

7 голосов
/ 07 октября 2011

Live Пример:

Вам не хватает одного из атрибутов для списка 

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 -->
1 голос
/ 06 октября 2012

У меня возникла такая же проблема. Вот мое исправление. 

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

JsFiddle Demo

Вам не нужно изменять свои наценки.

0 голосов
/ 20 июня 2012

Я использовал заполнение для решения такого рода проблем.Смотри ниже, я добавил отступы к 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"    />

Вот это DEMO

0 голосов
/ 07 октября 2011

Как насчет вставки разрыва строки для кнопки. Не чистое решение, я думаю. Но оно будет работать. 

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