Question

I’m using a form_for helper with the bootstrap framework. When I use date_select it creates a dropdown box for the year, month and date but they’re all on separate lines. I was wondering if there was any way of getting them all to display on the same line? My current CSS for forms looks like this:

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  height: auto;
  margin-bottom: 15px;
  @include box_sizing;
}

In response to a comment here’s the HTML:

<div class="row">
   <div class="span8 offset2">
      <%=form_for(@service) do|f|%>

         <%=f.label :date, "Date" %>
         <%=f.date_select :date, id: "dateField" %


         <%=f.submit "Add to Rota", class: "btn btn-large btn-primary" %>
      <% end %>
    </div>
</div>

Thanks in advance for any help!

Answer 1

Have you tried

float: left;
width: 150px;

The width has to be fixed with float left to make elements “follow” each other.