Simple_form: bootstrap styles for base errors

[elbzero]

In the below haml example I am using = f.error :base to show my base errors. With the default bootstrap wrappers this adds a

<span class="help-block"> Error here </span>

Which display as a normal text color. It is easy enough to fix this with css, but in my opinion, should really be .alert.alert-danger for bootstrap as this is error text which I am displaying.

= simple_form_for(@object) do |f|
  = f.error :base

  .form-inputs
    = f.input :some_field

  .form-actions
    = f.button :submit, "Save", class: "btn btn-primary"

[amoludage]

Hi @elbzero

I think you don't have copy of bootstrap assets in your project.

If you have added the bootstrap assets files then errors should be in "red" color.

I think this is not a bug.

[rafaelfranca]

Can you please provide a sample application that reproduces the error?

[yjukaku]

This is also a problem for us.

It looks like the method called by f.error is also appended per every f.input, which makes sense because the relevant bootstrap CSS is:

.has-error{
  .help-text{
    color: #some-shade-of-red;
  }
}

So calling f.input :email with an error generates HTML like:

<div class="form-group email required has-error">
  <label class="email required control-label" for="bla">
    <abbr title="required">*</abbr> Email
  </label>
  <input class="string email required form-control" type="email" value="" name="bla[bla][bla]" id="bla_bla_bla">
  <span class="help-block">can't be blank</span>  <!-- THIS is red, because it is nested in 'has-error' -->
</div>

On the other hand, like @elbzero mentioned, f.error :base outputs

<span class="help-block"> Error here </span>

Which doesn't help because it's not wrapped in a div with the has-error class.
The bootstrap class we would want to add would be text-danger, although I'm not sure SimpleForm has a way to do this.

-- EDIT --
Note, f.error :base, class: "text-danger" does NOT work, because the help-text class doesn't get overriden, resulting in this HTML <span class='help-text text-danger'>Error here</span>. The help-text class has its own color set which overrides the text-danger class! :angry:

[gmile]

With the following code

= f.error :base
= f.error_notification

I get this rendered:

Can error_notification not output errors on :base too? That'd solve the issue here.

[tlueker]

a simple work around would be to wrap f.error :base tag with a div tag with a class of “has-error”. If there is no base error, the div will be empty. In Rails, it would look like:

<div class="has-error">
  <%= f.error :base %>
</div>

[plicjo]

Are we considering this a bug? I can reproduce the issue in a sample app, if need be.

[jeffutter]

Any motion here? I ran into the same problem. I was expecting :base errors would end up in error_notification. It is easy enough to work around but maybe there is a simple solution.

[Silex]

The "official" way around this is https://github.com/plataformatec/simple_form/pull/1465 (use a second error_notification for :base)