horizontal select full width jQuery Mobile
css, html, jquery, jquery-mobile
Solution
Working example: http://jsfiddle.net/Gajotres/PUVkw/
HTML
<fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
<legend>Date of Birth:</legend>
<select name="select-choice-month" id="select-choice-month" data-icon="false">
<option >Month</option>
<option value="jan">Jan</option>
</select>
<select name="select-choice-day" id="select-choice-day" data-icon="false">
<option >Day</option>
<option value="1">1</option>
</select>
<select name="select-choice-year" id="select-choice-year">
<option >Year</option>
<option value="2011">2012</option>
</select>
</fieldset>
CSS
.custom-fieldset .ui-controlgroup-controls {
width: 100% !important;
}
.custom-fieldset .ui-controlgroup-controls .ui-select {
width: 33.33% !important;
}
Don't forget to add a custom class name to your fieldset, in my case it is called: `custom-fieldset`
Edit
Following ericjbasti comment here's a solution with custom id and without `!important`: http://jsfiddle.net/Gajotres/PUVkw/1/
Problem
Im attempting to ask a user for their birth day and im running into a few stylistic problems. You should be able to understand my problem from this http://jsfiddle.net/DjsWv/14/ I started with: ``` <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Date of Birth:</legend> <select name="select-choice-month" id="select-choice-month" data-icon="false"> <option >Month</option> <option value="jan">Jan</option> </select> <select name="select-choice-day" id="select-choice-day" data-icon="false"> <option >Day</option> <option value="1">1</option> </select> <select name="select-choice-year" id="select-choice-year"> <option >Year</option> <option value="2011">2012</option> </select> </fieldset> ``` problem here is i dont like that the width is not full or 100% The only solution I have seen is using the navbar which does not look appeasing to me... any ideas on how to get this horizontal control group to display as the full/standard width