jquerycssjquery-mobilejquery-mobile-fieldsetjquery-mobile-dialog

jQuery Mobile Dialog button takes all the space

I've set a dialog with a form in jQuery Mobile 1.3.1, and the button to submit the form is taking all the available space.

With button at the end: enter image description here

As you can see, it's covering everything.

Without it: enter image description here

Here it's fine, but I need the button to submit the data.

I've tried to ser a jsFiddle to reproduce my issue, but I don't know how to set an example in this case, where I need two pages. I'm sorry.

Here is the code used to build the dialog:

<!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>

EDIT: This is the only CSS I used to style the dialog box:

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

And this is what I was expecting to get (I edited the image, so it's not the solution) enter image description here

Solution

  • Here's a working example: http://jsfiddle.net/Gajotres/ZNbXx/

    But better use my example from below, just copy it in a HTML file and test it.

    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>