html - リストビューに表示ページが表示されたときに戻るボタンが非表示になる

Question

私は次のjQueryモバイルコードを持っています

<ul data-role="listview" data-dividertheme="b">
<g:each in="${categoryList}" var="category">
<li> <img src="../images/${category.imageName}"/>
<h3 class="ul-li-heading">${category.name}</h3>
<ul>
<g:if test="${category.userCategories}">
<g:each in="${category.userCategories}" var="ads">
<li>
Category: ${ads.category}
</li>
<li>
User: ${ads.user?.name}
</li>
<li>
Option: ${ads.optionName}
</li>
<li> Description: ${ads.description}
</li>
<hr/> </g:each>
</g:if>
<g:else>
<br/><br/><br/><br/>
<li> No User Category Description Added To Show </li>
</g:else>
</ul>
</li>
</g:each>
<div class="paginateButtons">
<g:paginate total="${categoryInstanceTotal}"/> </div> </ul>

問題は、実際にはサムネイルビューであるリストを最初にレンダリングし、サムネイルをクリックすると表示ボタンに他の情報が表示されるので、コードが正常に機能することです。しかし、問題は、自動的に追加される戻るボタンがコンテンツでラップアップすることであり、次のコードが自動生成される戻るボタンdivのサイズを大きくすることができません。

<div class="ui-bar-b ui-header" data-theme="b" data-role="header" role="banner">
高さは22ですが、firebugで増やすと増加しますが、cssを適用しようとすると機能しません。
誰か助けてもらえますか？

Answer 1

CSS 宣言に追加するか!important、jQuery Mobile ルールよりも具体的なルールを作成することができます (これは意図的に可能になります)。

.ui-mobile .ui-page .ui-header {
    height : 100px;
}
.ui-mobile .ui-page .ui-header a {
    height : 90px;
}​

デモ: http://jsfiddle.net/cAr7w/

.ui-mobilejQuery Mobile の初期化後の HTML 要素を.ui-page参照し、疑似ページ要素を.ui-header参照し、各疑似ページ内のヘッダー要素を参照します。