Question

我在jQuery Mobile 1.3.1中设置了一个带有表单的对话框，提交表单的按钮占用了所有可用空间。

结尾处的按钮： enter image description here

正如您所看到的，它涵盖了所有内容。

没有它： enter image description here

这里很好，但我需要按钮来提交数据。

我试图用jsFiddle来重现我的问题，但我不知道如何在这种情况下设置一个例子，我需要两页。对不起。

以下是用于构建对话框的代码：

<!DOCTYPE html>
<html lang="es">
<body id="derp" data-role="page">
    <header id="header" data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="c">
         <h1 id="titulo_header">Aaaaa </h1>

    </header>
    <div data-role="content" data-theme="c">
        <form method="post" action="#">
            <fieldset data-role="controlgroup" data-mini="true" id="jv_add_jugadores_local">
                <legend>Aaaaa Aaaaa AaaaaaaAaaaa Aaaaa AaaaaaaAaaaa Aaaaa Aaaaaaa:</legend>
                <label>01 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="2">
                </label>
                <label>02 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="9341">
                </label>
                <label>05 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="4">
                </label>
                <label>09 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="336">
                </label>
                <label>13 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="506">
                </label>
            </fieldset>
            <fieldset data-role="controlgroup" data-mini="true" id="jv_add_jugadores_visitante">
                <legend>Aaaaa Aaaaa AaaaaaaAaaaa Aaaaa AaaaaaaAaaaa Aaaaa Aaaaaaa:</legend>
                <label>03 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="9242">
                </label>
                <label>09 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="1117">
                </label>
                <label>11 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="464">
                </label>
                <label>14 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="732">
                </label>
                <label>18 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="9305">
                </label>
                <label>22 -- Aaaaa Aaaaa Aaaaaaa
                    <input type="checkbox" name="eLoc[]" value="9241">
                </label>
            </fieldset>
            <button type="submit" data-icon="check" id="add_jugadores">Añadir</button>
        </form>
    </div>
</body>
</html>

修改这是我用来设置对话框样式的唯一CSS：

.ui-dialog-contain {
    max-width: 900px !important;
}

这就是我期望得到的（我编辑了图像，所以它不是解决方案） enter image description here

Answer 1

以下是一个有效的例子：http://jsfiddle.net/Gajotres/ZNbXx/

但最好使用下面的示例，只需将其复制到HTML文件中并进行测试即可。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <style>
            .ui-dialog-contain {
                max-width: 900px !important;
            }       

            #jv_add_jugadores_local {
                padding-right: 5px !important;
            }

            #jv_add_jugadores_visitante {
                padding-left: 5px !important;           
            }
        </style>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>       
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <a href="#derp" data-rel="dialog" data-position-to="window" data-role="button" id="farmer_family_member">Show Dialog</a>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>    

        <div id="derp" data-role="page">
            <header id="header" data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="c">
                 <h1 id="titulo_header">Aaaaa </h1>

            </header>
            <div data-role="content" data-theme="c">
                <form method="post" action="#">
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <fieldset data-role="controlgroup" data-mini="true" id="jv_add_jugadores_local">
                                <legend>Aaaaa Aaaaa AaaaaaaAaaaa Aaaaa AaaaaaaAaaaa Aaaaa Aaaaaaa:</legend>
                                <label>01 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="2">
                                </label>
                                <label>02 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="9341">
                                </label>
                                <label>05 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="4">
                                </label>
                                <label>09 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="336">
                                </label>
                                <label>13 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="506">
                                </label>
                            </fieldset>                     
                        </div>
                        <div class="ui-block-b">
                            <fieldset data-role="controlgroup" data-mini="true" id="jv_add_jugadores_visitante">
                                <legend>Aaaaa Aaaaa AaaaaaaAaaaa Aaaaa AaaaaaaAaaaa Aaaaa Aaaaaaa:</legend>
                                <label>03 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="9242">
                                </label>
                                <label>09 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="1117">
                                </label>
                                <label>11 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="464">
                                </label>
                                <label>14 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="732">
                                </label>
                                <label>18 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="9305">
                                </label>
                                <label>22 -- Aaaaa Aaaaa Aaaaaaa
                                    <input type="checkbox" name="eLoc[]" value="9241">
                                </label>
                            </fieldset>                     
                        </div>
                    </div><!-- /grid-a -->              
                    <button type="submit" data-icon="check" id="add_jugadores">Anadir</button>
                </form>
            </div>
        </div>              
    </body>
</html>

jQuery Mobile Dialog按钮占用了所有空间

1 个答案: