JQuery Mobile - выберите элемент, который не отображается правильно в метке

Question

Я хочу иметь выпадающее меню на ярлыке радиокнопки, похоже, что оно работает, но оно отсекает его. Я столкнулся с аналогичной проблемой с текстовыми полями, однако я исправил это, сделав позиции относительными.

input.inline 
{ 
    position:relative !important; 
    display:inline; 
} 

<div id="confirmBooking" data-role="page" class="ui-page"> 
    <div data-role="header" data-theme="b"> 
     <h1>Welcome</h1> 
    </div> 
<div data-role="content"> 
     <h3>Choose:</h3> 
     <fieldset data-role="controlgroup"> 
      <input checked="checked" type="radio" name="item-choice" id="existing-item"/> 
      <label for="existing-item">An Existing Item 
      <select class="mySelect"> 
      <option>Option 1</option> 
      </select> 
      </label> 
    <input type="radio" name="item-choice" id="new-item"/> 
    <label for="new-item">New Item 
     <input class="inline" placeholder="Item Name"/> 
     <input class="inline" placeholder="Item Description"/>  
    </label> 
</fieldset> 
<div align="right">      
<a data-icon="arrow-r" data-iconpos="right" href="#" id="submit" data-theme="b" data-role="button" data-inline="true">Make Booking</a> 
</div> 
</div> 
</div> 

Я добавил jsfiddle here. Надеюсь, это может продемонстрировать проблему более четко.

Answer 1

Потому что вы делаете так: http://jsfiddle.net/MehU5/3/ вместо того, чтобы использовать флажок использует отдельные разборные формы с различными

<!-- Home --> 
<div data-role="page" id="page1"> 
    <div data-role="content"> 
     <div data-role="collapsible-set"> 
      <div data-role="collapsible" data-collapsed="false"> 
       <h3> 
        An existing item 
       </h3> 
       <div data-role="fieldcontain"> 
        <label for="selectmenu1"> 
        </label> 
        <select name=""> 
         <option value="option1"> 
          Option 1 
         </option> 
        </select> 
       </div> 
       <input value="Make booking" type="submit"> 
      </div> 
      <div data-role="collapsible"> 
       <h3> 
        New item 
       </h3> 
       <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup"> 
         <label for="textinput1"> 
         </label> 
         <input name="" id="textinput1" placeholder="Item name" value="Item name" 
         type="text"> 
        </fieldset> 
       </div> 
       <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup"> 
         <label for="textinput2"> 
         </label> 
         <input name="" id="textinput2" placeholder="Item description" value="" 
         type="text"> 
        </fieldset> 
       </div> 
       <input value="Make booking" type="submit"> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

Да единственная проблема, которую я вижу с вами кода является то, что вы оберточной теги Вокруг и заявления , правильный способ заключается в следующем:

 <div data-role="content"> 
     <form method="get" action=""> 
     <fieldset data-role="fieldcontain"> 
      <label for="select1">Basic Select Menu: </label> 
      <select name="select" id="select1"> 
       <option value="1">Value 1 </option> 
       <option value="1">Value 1 </option> 
      </select> 
      </fieldset> 
     </form> 
     </div>