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對話框按鈕佔用所有空間

回答

相關問題