JQuery Mobile - Select the item that does not display correctly in the label

advertisements

I wish to have a dropdown within a radio button label, it seems to work however it cuts off the bottom of it. I faced a similar issue with textboxes however I fixed that by making the positions relative.

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>

I've added a jsfiddle here. Hopefully that can demonstrate the problem more clearly.


Because you do so: http://jsfiddle.net/MehU5/3/ instead of using a checkbox uses a separate collapsible forms with different

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