Jquery mobile select menu overlays on extreme right - jquery-mobile

Question

I am using jquery mobile select menu with data-native-menu as false. The issue is if i click select menu, overlay popups on extreme right, instead of above the select menu control. i fixed my page max-width as 400px. Jquery mobile calculating the overlay position based on screen size,hence if i reduced the screen size overlay popup above the select menu control. But how can i make the select menu to overlay within my page size in maximized mode of screen?
<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>
Here is the picture. The gray area is the page size (data-role=page). Since I have a bigger monitor, the menu appears on the extreme right.

Answer 1

Set the width on the fieldContain div instead of the parent 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>