Question

我正在使用jquery mobile。在我的标题中我有三个按钮我打开弹出屏幕点击按钮。但问题是我点击（+）按钮弹出尺寸很大（看起来很好）但是当点击设置按钮（第一个）它的大小减少为什么？有类似的竞争。我需要增加弹出屏幕的大小。这是我的代码。

http://jsfiddle.net/ravi1989/HesVd/16/

<div data-role="page" id="Home" > 
            <div data-role="header" data-theme="b" data-position="fixed" >
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <a href="#UserSettingScreen" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                    <a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                    <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>
            <!--div data-role="content">
                       <div id="here_table" class="scrollable" data-scroll="y" style ="height:400px" > </div>
                </div-->
            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="here_table" >
                </ul>
                <!--- CaseInformationScreen Popup screen---------------------------->
                <div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
                    <div data-role="header" data-theme="b" >
                        <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                        <h1>Case Information</h1>
                        <a href="#" ddata-role="button" data-corners="false">Add</a>
                    </div>

                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="text-12" value="" type="text">
                    </div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                        <input name="text-12" id="text-12" value="" type="text">
                    </div>
                    <div data-role="fieldcontain">
                        <label for="textarea-12">Textarea:</label>
                        <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
                    </div>
                </div>
                <!--- CaseInformationScreen Popup screen End---------------------------->

                <!--- User Setting Popup screen---------------------------->
                <div data-role="popup" id="UserSettingScreen" data-close-btn="none">
                    <div data-role="header" data-theme="b" >
                        <a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
                        <h1>User Settings</h1>
                        <a href="#" ddata-role="button" data-corners="false">Ok</a>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
                        <input name="text-12" id="text-12" value="" type="text">
                    </div>  
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
                        <select name="select-choice-1" id="select-choice-1">
                            <option value="standard">A</option>
                            <option value="rush">B</option>
                        </select>
                    </div>
                </div>
                <!--- User Setting Popup screen End---------------------------->

            </div>
        </div>

Answer 1

jQuery Mobile 的问题在于它具有构建响应内容的内部逻辑。

除非您手动指定值 jQuery Mobile ，否则会为您提供。在您的情况下，问题出现在文本区域中，其默认值比上一个弹出窗口中的大元素（按钮）宽。

这就是为什么手动设置弹出宽度很重要的原因，甚至官方文档也建议这样做。

工作示例：http://jsfiddle.net/Gajotres/2752A/

HTML：

    <!--- User Setting Popup screen---------------------------->
    <div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important">
        <div data-role="header" data-theme="b" >
            <a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
            <h1>User Settings</h1>
            <a href="#" ddata-role="button" data-corners="false">Ok</a>
        </div>
        <div data-role="content" data-theme="b" >
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
                <input name="text-12" id="text-12" value="" type="text"/>
            </div>  
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
                <select name="select-choice-1" id="select-choice-1">
                    <option value="standard">A</option>
                    <option value="rush">B</option>
                </select>
            </div>
        </div>                
    </div>

如果你看一下我在弹出容器中添加了一个style属性：

style="max-width:300px !important; width: 300px !important"

还有一件事，弹出内容现在包含在 data-role="content" 中，以便可以对其应用填充。

为什么在jquery mobile中不同情况下弹出屏幕大小会发生变化

1 个答案:

HTML：