how do I align my error message with Simple_form for Ruby on Rails?

Question

at present, my form looks like this with an error message (Name is a required field):

But I want to put the 'can't be blank' error alongside the 'Name', like this:

I've given myself more freedom on the 'Name' label and error by changing from default bootstrap Simple_form classes with this code:

<%= f.input :name, :required => true, :label_html => { :class => 'edit_form_titles' }, :error_html => { :class => 'cant_be_blank'} %>

And my css for these classes is:

  .edit_form_titles{
  display: block;
  margin-bottom: 0px;
  color: #333333;
  }

  .cant_be_blank{
  font-size:12px;
  }

Any idea on how I can align the error message next to the name, as I describe? Thanks for any help.

Answer 1

I managed to get my errors displaying in the label above the input box.

With the code below I've given my errors a class, which can be formatted as to positioning etc, but there was always a blank div or something under the input box, which put the other input boxes under it out of joint.

<%= f.input :name, :required => true, :label_html => { :class => 'edit_form_titles' }, :error_html => { :class => 'cant_be_blank'} %>

In my initializers/simple_form.rb there was:

  config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div', :class => 'controls' do |input|
      input.use :input
      input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      input.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

I changed this to:

 config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'label-error' do |input|
      b.use :label
      b.use :error, :wrap_with => { :tag => 'span', :class => 'help-block' }
    end
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :input
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

That got rid of the blank empty space under the input box and I could format my cant_be_blank class so the text appears exactly next to the text in my label.