Append/prepend bootstrap icons with simple_form

Question

Twitter Bootstrap icons are pretty deadly seen here.

Look at the bottom right hand corner of that section. See that email with an icon prepended? That is what I want to do. I want to make simple_form and boostrap play nicely.

Here's what I've found that will prepend the icon to the input:

= f.input :email, :wrapper => :append do
  = f.input_field :email
  <span class="add-on"><i class="icon-envelope"></i></span>

But it isn't flush (that could be fixed by changing offsets in CSS) and it's pretty ugly. For reference, here is the CSS fix (add it to your bootstrap_overrides.css.less file):

.input-prepend .add-on,
.input-append input {
  float: left; }

Does someone know a less hacky way to make simple_form prepend or append an icon with bootstrap?

Update:

The answer below made me have another look at it. HAML usually adds whitespace everywhere, but there is a workaround

Here is an update for the original HAML which removes the whitespaces and doesn't require the CSS hack:

= f.input :email, :wrapper => :append do
  = f.input_field :email
  %span.add-on>
    %i.icon-envelope

That little greater than (>) makes all the difference. The output HTML has no newlines between the input and the span.

Solution 1

It's due to whitespace between the rendered input and span elements. In this case, a line break.

I am not familiar enough with HAML to tell you how to eliminate the whitespace, but the equivalent ERB would go something like:

<%= f.input :email, :wrapper => :append do %>
  <%= f.input_field :email %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>

Solution 2

I figured out a better way to do this, to keep placeholder, label, and other options intact.

For those that are still using old Bootstrap 2.3.x

<div class="input-prepend">
  <span class="add-on">@</span>
  <%= f.input_field :password, :required => true, :label=>false, :placeholder=>"Password" %>
</div>

The key is using f.input_field to remove all div wrappers.

UPDATE

You can use the other solution to include a placeholder, but you cannot remove the label using that solution.

<%= f.input :email, :wrapper => :append do %>
  <%= f.input_field :email, placeholder: "hello" %><span class="add-on"><i class="icon-envelope"></i></span>
<% end %>

Comments

[Kelvin]

Possible duplicate of stackoverflow.com/questions/10033572/…

[Manuel Meurer]

Instead of %span(class="add-on") you can write %span.add-on (same with icon-envelope)

[Matthew Boston]

and for prepend I used %span.add-on> @ \n = f.text_field :twitter

[Tsagadai]

HAML can process ERB directly using :erb and indenting. However, you pushed me in the right direction for figuring this out. Here is a working solution (see original post's update).

[Happynoff]

With this approach you lose the placeholder and other options, that's sad :(

[Abram]

Yeah, any idea how to get the other options (placeholder, etc) in there?