jQuery Mobile对话框按钮占用所有空间

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

，并在最后按钮： 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

来源

2013-04-17 Deses

你怎么想这个按钮是什么样子？你也应该添加你的CSS。 – Gajotres

我没有自定义的CSS对话框，我正在使用类似Android的Holo主题。我将用预期结果的图像进行更新。 – Deses

我在问，因为在你的图片上2个字段集合在一起，但是在一个真实的例子中，没有css或jQuery移动网格就无法完成。 – Gajotres

下面是一个工作示例：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>

来源

2013-04-17 15:15:26 Gajotres

你连续两天帮助我！哈哈，非常感谢你！ – Deses

jQuery Mobile对话框按钮占用所有空间

回答

相关问题