Jump to content
newcoder1010

How to style webform date picker?

Recommended Posts

Hello,

HTML:

<div class="webform-container-inline webform-datepicker">

<div class="form-item form-item-submitted-personal-information-birth-date-month form-type-select form-group">

<select class="month form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-month" name="submitted[personal_information][birth_date][month]">

<option value="" selected="selected">Month</option>

<option value="1">Jan</option>

<option value="2">Feb</option>

</option>

</select>

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-month">Month</label>


</div>

<div class="form-item form-item-submitted-personal-information-birth-date-day form-type-select form-group">

<select class="day form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-day" name="submitted[personal_information][birth_date][day]">

<option value="" selected="selected">Day</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select> 

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-day">Day</label>


</div>

<div class="form-item form-item-submitted-personal-information-birth-date-year form-type-select form-group">

<select class="year form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-year" name="submitted[personal_information][birth_date][year]">

<option value="" selected="selected">Year</option>

<option value="1888">1888</option><option value="1889">1889</option><option value="1890">1890</option><option value="1891">1891</option>

<option value="1892">1892</option><option value="1893">1893</option><option value="1894">1894</option><option value="1895">1895</option><option value="1896">1896</option><option value="1897">1897</option>

</select>

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-year">Year</label>
</div>
</div>

Now Month, Day, Year display in a column. How can I display month, day and year in the same row? I tried this and I still see them in a column.

select#edit-submitted-personal-information-birth-date-year {
    width: 33%;
    float: left;
}

select#edit-submitted-personal-information-birth-date-day {
    width: 33%;
    float: left;
}

select#edit-submitted-personal-information-birth-date-month {
    width: 33%;
    float: left;
}

Please advise.

Share this post


Link to post
Share on other sites

You are floating the wrong elements, you need to float the div container elements they are within, as by default div elements stretch to the total available width of there parent element.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×