Append/prepend bootstrap icons with simple_form

26
votes

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.

2
ruby-on-rails-3twitter-bootstrapsimple-form
Possible duplicate of stackoverflow.com/questions/10033572/… – Kelvin
Instead of %span(class="add-on") you can write %span.add-on (same with icon-envelope) – Manuel Meurer
and for prepend I used %span.add-on> @ \n = f.text_field :twitter – Matthew Boston

2 Answers

39
votes

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 %>
1
votes

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 %>