jQuery mobile grid не отображает весь контент

Question

В моем мобильном приложении jQuery некоторые из содержимого не появляются на моем экране. Некоторое содержимое отображается под моим заголовком и навигационной панелью. Это код, который я использовал для моей сетки. Я работаю с соло и сеткой с двумя столбцами.

Изображение моей проблемы: http://imageshack.us/photo/my-images/23/f3fs.png/

Мой код сетки:

<script id="tradeTemplate" type="text/x-jquery-tmpl"> 

    <div class="ui-grid-solo"> 
     <div class="ui-block-a"><div class="stock">Stock:${title}</div></div> 
    </div> 
    <div class="ui-grid-a"> 
     <div class="ui-block-a"><div class="position" style="width:100%">Type</div></div> 
     <div class="ui-block-b"><div class="position" style="width:100%">${type}</div></div> 
     <div class="ui-block-a"><div class="position" style="width:100%">Position</div></div> 
     <div class="ui-block-b"><div class="position" style="width:100%">${position}</div></div> 
     <div class="ui-block-a"><div class="position" style="width:100%">Entry</div></div> 
     <div class="ui-block-b"><div class="entry" style="width:100%">${entry}</div></div> 
     <div class="ui-block-a"><div class="position" style="width:100%">Stoploss</div></div> 
     <div class="ui-block-b"><div class="stoploss" style="width:100%">${stoploss}</div></div> 
     <div class="ui-block-a"><div class="position" style="width:100%">Target1</div></div> 
     <div class="ui-block-b"><div class="target1" style="width:100%">${target1}</div></div> 
     <div class="ui-block-a"><div class="position" style="width:100%">Target2</div></div> 
     <div class="ui-block-b"><div class="target1" style="width:100%">${target2}</div></div> 
    </div> 
    <div class="ui-grid-solo"> 
      <div class="ui-block-a"><div class="shareimage" style="width:100%"><center><img src='http://www.stock-hunter.net/system/files/styles/large/private/${screenshot.filename}' ></center> </div></div> 
     </div> 
     <div class="ui-grid-solo"> 
      <div class="ui-block-a"><div class="explanation" style="width:100%">Explanation: ${explanation}</div></div> 
    </div> 
     <div class="ui-block-solo"><div class="warning" style="width:100%">Please keep in mind all trades are at own risk! If a level don't get touched in a straight way the trade is not valid anymore!</div></div> 
    </div> 
    <div class="ui-grid-a"> 
     <div class="ui-block-a"><div class="position" style="width:100%">Result:${result}</div> </div> 
     <div class="ui-block-b"><div class="position" style="width:100%">Post date:${creationdate} </div></div> 
    </div> 
</script> 

Answer 1

Это код, который я нашел на Jquery мобильного демонстрационную страницу.

<div class="ui-grid-a"> 

Предыдущая Следующая Подробнее

Answer 2

Вы также можете использовать JQM заголовок и содержание JQM правильно? data-role="header" & data-role="content"

Нечто подобное, DEMO http://jsfiddle.net/yeyene/5kfnT/7/

<div data-role="page" id="home"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Title</h1> 
     <div data-role="navbar" class="test1" data-grid="d"> 
      <ul id="footer_nav" data-transition="none"> 
      <li><a data-transition="none" id="menu_nav_walloffame" data-icon="custom" data-iconpos="top" > Wall</a></li> 
      <li><a data-transition="none" id="menu_nav_associateview" data-icon="custom" data-iconpos="top">Associate</a></li> 
      <li><a data-transition="none" name="menu_nav_managersview" id="menu_nav_managersview" data-icon="custom" >Managers</a></li> 
      <li><a data-transition="none" id="menu_nav_treasurechest" data-icon="custom" data-iconpos="top" >Treasure</a></li> 
      <li><a data-transition="none" id="menu_nav_redeem" data-icon="custom" data-iconpos="top" >Redeem</a></li> 
      </ul> 
     </div> 
    </div> 
    <div data-role="content"> 
     <div class="ui-grid-a"> 
      <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:30px">Block A</div></div> 
      <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:30px">Block B</div></div> 
      <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:30px">Block A</div></div> 
      <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:30px">Block B</div></div> 
      <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:30px">Block A</div></div> 
      <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:30px">Block B</div></div> 
      <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:30px">Block A</div></div> 
      <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:30px">Block B</div></div> 
     </div><!-- /grid-a --> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h1>footer</h1> 

    </div> 
</div>