jQueryMobileで横スクロールが表示されてしまう

jQueryMobileを使用していてフッターを使用するとどうも横スクロールが表示されるみたい

<div data-role=”footer” data-position=”fixed” class=”ui-bar”>

なので、jQueryMobileのcssにfooterの定義があるだろうと「footer」で検索したところ

ui-footer

というのが検索に引っかかったので試しに独自cssを宣言して下記を追加したところ横スクロールがなくなった。

.ui-footer {

width: 90%;

}

ただし、端末に依存するかもしれないので全端末90%で良いかどうかわ分からない。

4Sは90%で横スクロールがなくなった。

コメントにてもっと良い方法を教えて頂いたので、下記に訂正。

.ui-footer {

padding-left:0; padding-right:0;

}
(フッタの中身を囲った要素){

margin-left:10px; margin-right:10px;

}

 

jQueryMobileで横スクロールが表示されてしまう」への2件のフィードバック

  1. かー

    私もアレってなって調べてましたが、
    ui-footerのpadding分(左右8px)広がってるようでした。

    なので

    .ui-footer { padding-left:0; padding-right:0 }
    (フッタの中身を囲った要素){ margin-left:10px; margin-right:10px }

    とした方が安全だと思いますよ

  2. toshiotm 投稿作成者

    コメントありがとうございます。

    なるほど!確かにその方が他の端末でもそのまま使えますね。
    さっそく試してみます。ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です