Question

We’re using datetime_select in rails and I am really struggling with styling of it.

For a couple of reasons, I’d like to show hour and minutes on a new line rather than inline with date/month/year.

The HTML (options elements removed to simplify the looks here):

<div> 
  <select id="trade_date_3i" name="trade[date(3i)]"> 
    <option selected="selected" value="11">11</option> 
  </select> 
  <select id="trade_date_2i" name="trade[date(2i)]"> 
    <option selected="selected" value="4">April</option> 
  </select> 
  <select id="trade_date_1i" name="trade[date(1i)]"> 
    <option selected="selected" value="2011">2011</option> 
  </select> 
  <select id="trade_date_4i" name="trade[date(4i)]"> 
    <option selected="selected" value="04">04</option> 
  <select id="trade_date_5i" name="trade[date(5i)]"> 
    <option selected="selected" value="40">40</option> 
  </select> 
</div> 

Here is how it renders default:

http://www.outside.dk/b.png

All the select elements have unique IDs, so I’ve played with the CSS display property on the hour and minute boxes, but just cannot get them to display on the same line.

Here’s how it renders if I set “display: block;” on the hour box (#trade_date_4i):

http://www.outside.dk/c.png

Here is how I’d like it to render:

http://www.outside.dk/a.png

Can anyone help, please?

Answer 1

You can set width to the parent div, that equals to the width of first three elements, and then align elements in div to the right.