say
say

Reputation: 2655

How to change simple_form to use bootstrap prepended inputs

I'm use Rails 3.2, simple_form and it's default bootstrap generator.

I want to use one of the Bootstrap "appended and prepended" form elements in my layout. How do I modify the simple form input to generate the needed code?

Code used:
<%= f.input :price, :label => 'Price:' %>

Generated code:

<div class="control-group string optional">
    <label class="string optional" for="price">Price:</label>
    <div class="controls">
        <input class="string optional" id="price" type="text">
    </div>
</div>

Desired Code:

<div class="control-group string optional">
    <label class="string optional control-label" for="price">Price:</label>
    <div class="input-prepend">
        <span class="add-on">$</span>
        <input class="string optional" id="price" type="text">
    </div>
</div>

Note the "input-prepend" class change and the "add-on" span.

Upvotes: 1

Views: 4322

Answers (1)

Jorge Najera T
Jorge Najera T

Reputation: 1551

You need to add a wrapper.

For pre-append the code is something like this:

 <%= f.input :price, :wrapper => :prepend, :label => false do %>
    <%= content_tag :span, "$", :class => "add-on" %>
    <%= f.input_field :price %>
  <% end %>

For more information check this live example of using simple_form with bootstrap. You can find the code here.

Hope it help.

Upvotes: 8

Related Questions