2

in custom.css.scss file 

.field_with_errors {
    @extend .control-group;
    @extend .error;

}

and the html.erb

<%= form_for @timecard , url:{action: "savecard"},html:{class: "form-inline"} do |f| %>
    <%= f.label :"Date"%>
    <%= f.date_select :starttime ,{use_month_numbers: true }, class: "input-small" %>
    <%= f.label :"Hours"%>
    <%= f.number_field :hours, class: "input-small" %>
    <%= f.label :"Project"%>
    <% projects = Project.all.map { |project| [project.name, project.charge_number]  } %>
    <%= f.select :charge_number, options_for_select(projects) ,{},class: "input-small" , style:"width:150px"%>
    <%= f.submit "Save", class: "btn" %>
    <%= f.submit "Delete", class: "btn" %>
    <%= f.submit "Submit", class: "btn btn-danger",confirm:"You can't edit it agin if you've submitted it" %>
<% end %>

In normal status ,it looks nice

enter image description here but if something wrong happened,it looks like this enter image description here

and the html code it generated

<label for="time_card_Hours">Hours</label>
    <div class="field_with_errors"><input class="input-small" id="time_card_hours" name="time_card[hours]" type="number" /></div>
    <label for="time_card_Project">Project</label>
madth3
  • 7,275
  • 12
  • 50
  • 74
choury
  • 75
  • 1
  • 7

3 Answers3

4

Because you are using form-inline, and div displays as a block default. try 

.field_with_errors {
    @extend .control-group;
    @extend .error;

    display: inline-block;
}
Bigxiang
  • 6,252
  • 3
  • 22
  • 20
4

Note that with Bootstrap 3 names have changed 

.field_with_errors {
  @extend .has-error;
  display: inline-block;
}
David
  • 4,080
  • 1
  • 26
  • 34
  • And with Bootstrap 4 they changed again: has-error -> is-invalid. [Credit to this SO question.](https://stackoverflow.com/questions/70589481/did-the-validation-state-classes-has-error-etc-got-removed-from-bootstrap-5) – Nick Gobin Jul 16 '23 at 19:56
3

I ended up using the following:

.field_with_errors {
  @extend .has-error;
}

.form-inline .field_with_errors {
  display: inline-block;
}

This extends the .has-error Bootstrap class for all forms, and if the form used is an inline form (.form-inline), it displays .field_with_errors as inline-block.

Daniel Olivares
  • 544
  • 4
  • 13