首页 > 解决方案 > Jquery Mobile Dialog - Full Width

问题描述

I am developing a website using Jquery Mobile jquery.mobile- Version : 1.4.5 Jquery version : 1.9.1

I am creating a dialog page using the following code

<div data-role="dialog" width="100vw" style="width:100vw;margin-left:0;margin-right:0;" data-close-btn="none" id="dlg" >
<div id="container" style="background-color:white;padding:5px;width:90vw;max-width:95vw;margin-left:0 !important;margin-right:0 !important;">
<h3>Task - Create</h3><hr>
<form data-ajax="false" id="form">
<label for="txtDescription">Description</label>
<input type="text" id="txtDescription" name="description">
</form>
</div>
</div>

The dialog div seems to be correctly sized to 100% of view port. Its left and top are also at 0,0 However the div with id '#container' is also sized to 90 and 05 % of viewport but it is not centered or positioned at 0,0. There is a large top and left margin because of which the #container is hidden on the right side. I want the #container to be positioned at 0,0

Image showing the div #container. You can see the empty white space in the left and top.

Image showing the dialog Div. It is positioned at 0,0 and covers the entire viewport correctly.

标签: jquery-mobilejquery-ui-dialog

解决方案


推荐阅读