0

我正在使用 jquery 移动选择菜单，其中 data-native-menu 为 false。问题是如果我单击选择菜单，则在最右侧覆盖弹出窗口，而不是在选择菜单控件上方。我将页面最大宽度固定为 400 像素。Jquery mobile 根据屏幕尺寸计算覆盖位置，因此如果我减小选择菜单控件上方的屏幕尺寸覆盖弹出窗口。但是我怎样才能让选择菜单在屏幕最大化模式下覆盖在我的页面大小内？

<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 回答