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

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

我的案子


案例信息
案例名称：
案件日期：
文本区域：
用户设置
IP地址：
显示字体：
A.
B
jQuery Mobile的问题在于，它有一个构建响应内容的内部逻辑

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

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

工作示例：

HTML:
还有一件事，弹出内容现在被包装到一个
数据角色=“content”中，以便可以对其应用填充。
如何使文本字段和标签在同一行中？在水平方向？
<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>

    <!--- 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="max-width:300px !important; width: 300px !important"