1

タイトルの通り、

jquery モバイル ページで入力フィールドを使用すると、入力フィールドが画面の全幅に拡張されません。

小さい画面のデバイスを使用している場合は問題なく収まりますが、デスクトップ ブラウザーでページを表示すると、入力フィールドはブラウザーの幅の 2/3 しか表示されません。

ブラウザ/画面の幅に合わせて拡張するように設定する方法はありますか?

ここに私のコードがあります:

http://jsfiddle.net/B8JDt/2/

<body>
<div data-role="page" id="page" onLoad="initialiseFields()">
  <div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > <a href="" onclick="history.back(-1); return false;">Back</a>
    <h1>New Claim</h1>
  </div>
  <div data-role="content">
    <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">
      <li data-role="list-divider">
        <h2 id="itemTitle">Title</h2>
      </li>

      <li>
        <h3>Journey From:</h3>
        <div data-role="fieldcontain">
          <input type="text" name="claimTitle" id="textFieldJourneyFrom" value="" />
        </div>
      </li>
      <li>
        <h3>Journey To:</h3>
        <div data-role="fieldcontain">
          <input type="text" name="claimTitle" id="textFieldJourneyTo" value="" />
        </div>
      </li>

    </ul>
    <div data-role="navbar">
      <ul>
        <li><a href="hello.html" data-theme="b">Save</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
4

1 に答える 1

2

jQuery Mobile には、ボックスのサイズ変更 CSS3 ルールのバグのある実装があります。

この問題を解決するには、次の CSS を使用します。

@media all and (min-width: 28em){
    .ui-input-text  {
        box-sizing: none !important;
        -moz-box-sizing: none !important;
        -webkit-box-sizing: none !important;
        width: 100% !important;
        display: inline-block !important;
    }
}

Fistbox-sizing: noneは存在​​しませんが、デフォルト値をオーバーライドします。このようにオーバーライドしてから、css ファイルから手動で削除することをお勧めします。

作業例: http://jsfiddle.net/B8JDt/3/

于 2013-07-12T11:44:48.140 に答える