horizontal select full width jQuery Mobile

Question

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

Answer 1

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/

Answer 2

Its not necessary to overwrite any style. You can use the navbar behavior even in a form.

See: jQuery Mobile: Full width of <select>s fieldgroup