Align HTML pickers on one line

Question

I am working on a mobile application using HTML / CSS / JavaScript. I have two choices (drop down menu), one for the number of dates and the other for several years. I want to see these choices in one line, but no matter what I do, I get a drop-down menu (number of dates) in one line, and on the next line I get a drop-down menu for the number of years. Below you can see my codes

<div data-role="controlgroup" data-type = "horizontal" > <label for="select-choice-1" >Choose Expiry Date</label> <select name="select-choice-1" id="select-choice-1" data-inline = "true" style = "float: left"> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> </select><br /> </div> 

UPDATE: I am testing these codes in an Android browser using jQuery mobile framework.

Answer 1

Try putting select tags to the left and adding clear:both to the style on the label . If you want the label above two selections, just add <br /> right below the label.

He would look like

 <label>Label Value</label> <select> <option>Etc...</option> </select> <select> <option>Second select option...</option </select> 

and CSS will be

 label { clear:both; } select { float:left; } 

Also, as a head-up, you end your second select tag before the first option tag, so they are not included. <select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/> . You need to get rid of / just before the end of the tag.

Answer 2

This is the width in the ui-select class causing your problem. Setting the width to auto should fix the problem. jQM adds a ton of extra markup so that the look on the page is consistent across multiple devices. If you are viewing the page source in a browser, such as Chrome or FireFox, you may see additional elements. In your case, you had to change the ui-select class, since by default it has a width of 60%.

Live example:

• http://jsfiddle.net/phillpafford/trdYP/47/

JS:

 $('#select-choice-1').parent().parent().css('width','auto'); 

HTML:

 <div data-role="page" id="home"> <div data-role="content"> <div data-role="controlgroup" data-type="horizontal" data-inline="true"> <label for="select-choice-1" data-inline="true">Choose Expiry Date</label> <select name="select-choice-1" id="select-choice-1" data-inline="true"> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="select-year" id="select-yaer" data-inline="true"> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> </select> </div> </div> </div> 

Answer 3

If you make them float to the left, they will sit side by side if their total width does not exceed the width of the container.