Наложения меню выбора мобильных устройств Jquery в крайнем правом углу

Я использую меню выбора мобильных устройств jquery с собственным меню данных как ложное. Проблема в том, что если я щелкну меню выбора, всплывающие окна будут накладываться в крайнем правом углу, а не над элементом управления меню выбора. я исправил максимальную ширину моей страницы как 400px. 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). Так как у меня монитор большего размера, меню появляется в крайнем правом углу.

Образец изображения


overlay position jquery-mobile select-menu
person subha    schedule 11.06.2012    source источник
comment
показать свой код? мы не можем догадаться...   -  person Th0rndike    schedule 11.06.2012
comment
извините за неясность, отредактировал...   -  person subha    schedule 11.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

Установите ширину на 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>
person Jack    schedule 03.07.2012