ボタン付きjQueryモバイルタイトル位置

私はiPhone（iOS 5）で実行している簡単なアプリケーションを持っています。これは、バックボタンとヘッダーテキストのサイズと位置を正しく設定していません。ヘッダーのテキストがボタンの下に表示されます。私はjQuery Mobileがボックスの外にあるものとして予想どおりのサイズや位置を設定していないと思います...ボタン付きjQueryモバイルタイトル位置

私は、ヘッダ・テキストが切り捨てられ、バック・ボタンの右側から始まります。タイトルの右側に別のボタンはありませんので、ページの右側に行くと問題ありません。私はthis answerを見なかったが、私は試していたことは、私が望んでいたものを私に取得していないhttp://jsfiddle.net/5n8WN/

：

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Page Title</title> 
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>   
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
      <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> 
     <body> 
      <div data-role="page"> 
       <div data-role="header"> 
        <a data-icon="arrow-l" data-rel="back">A long button</a> 
        <h1>A very very very long title</h1> 
       </div> 

       <div data-role="content"> 
        <p>Page content goes here.</p> 
       </div> 

       <div data-role="footer"> 
        <h4>Page Footer</h4> 
       </div> 
      </div> 
     </body> 
    </html>

実行可能な例は、です。

出典

2011-11-28 TofuBeer

タイトルがカバーされている理由は、H1タグの左右に余白があり、戻るボタンが90pxより大きいということです。ここで

.ui-title { 
    margin  : 0.6em 1em 0.8em 140px !important; 
    text-align : left !important; 
}

はjsfiddleです： .ui-titleクラスは、この修正するためにあなたは、CSSルールを変更することができます http://jsfiddle.net/jasper/5n8WN/1/

出典

2011-11-28 20:16:05 Jasper

カスタムヘッダの設定が
あなたはdoesnのヘッダーを作成するために必要がある場合デフォルトコンフィグレーションに従ってください。スタイルのマークアップをヘッダコンテナ内のコンテナdivにラップすると、プラグインは自動ボタンロジックを適用しないので、カスタムを書くことができますヘッダーの内容をレイアウトするためのスタイル。

data-roleというヘッダーを使用せずにカスタムバーを作成することもできます。たとえば、任意のコンテナで始まり、 ui-barクラスを追加して、標準のバーパディングを適用し、ui-bar-bクラスを追加してテーマからバースウォッチスタイルを割り当てます（ "b"は任意のスウォッチ文字）。

http://jquerymobile.com/demos/1.0/docs/toolbars/docs-headers.html

Eample：

<div class="ui-bar ui-bar-b"> 
    <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3> 
</div>

出典

2011-11-28 21:00:53

ボタン付きjQueryモバイルタイトル位置

答えて

関連する問題