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

2 일 연속으로 나를 도와주세요! 하하, 정말 고마워! – Deses

jQuery Mobile 대화 상자 버튼은 모든 공간을 필요로합니다.

답변

관련 문제