JQuery Mobile - Select element not displaying correctly within label

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.\[code\]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 to SchoolEvents Pro</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="http://stackoverflow.com/questions/15667112/#" id="submit" data-theme="b" data-role="button" data-inline="true">Make Booking</a> </div></div> </div>\[/code\]I've added a jsfiddle here. Hopefully that can demonstrate the problem more clearly.
 
Back
Top