0

data-native-menu を false にして jquery モバイル選択メニューを使用しています。問題は、選択メニューをクリックすると、選択メニュー コントロールの上ではなく、右端にポップアップがオーバーレイされることです。ページの最大幅を 400px に修正しました。画面サイズに基づいてオーバーレイ位置を計算するJqueryモバイル。したがって、選択メニューコントロールの上の画面サイズオーバーレイポップアップを縮小した場合。しかし、画面の最大化モードで選択メニューをページサイズ内にオーバーレイするにはどうすればよいですか?

<div style="margin:0 auto;">
<div data-role="page" style="width:400px">

<div data-role="fieldcontain">
    <label for="select-choice-9" class="select">Shipping method(s):</label>
    <select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
        <option>Choose options</option>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>


</div>
</div>

これが写真です。灰色の領域はページ サイズ (data-role=page) です。モニターが大きいので、メニューは右端に表示されます。

サンプル画像

4

1 に答える 1

0

fieldContain div親の代わりに幅を設定するdiv

<div data-role="page">
<div data-role="fieldcontain" style="width:400px">
    <label for="select-choice-9" class="select">Shipping method(s):</label>
    <select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
        <option>Choose options</option>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>
</div>
于 2012-07-03T14:04:54.377 に答える