CODEWITHSUNDEEP
ruby-on-rails-3twitter-bootstrapsimple-form
kobaltz
kobaltz

Reputation: 7070

simple_form and Twitter Bootstrap and input-append code

I'm trying to use the input-append feature of Twitter Bootstrap. However, I want to try and keep my code cleaner with the simple_form.

<div class="control-group string required">
 <label class="string required control-label" for="video_company_id"><abbr title="required">*</abbr> Company</label>
  <div class="controls">
    <div class="input-append">
      <%= f.text_field  :company_id, :class => "span2" %>
        <span class="add-on"><%= link_to image_tag('/assets/button/magnifier.png'), "#select_company", :"data-toggle" => "modal" %></span>
    </div>
  </div>
</div>

yields

enter image description here

What is a better way to write this with simple_form using f.input?

Edit to mdepolli

Thanks mdepolli. That does get me closer to where I need to be. However, it just puts the lookup inline with the form instead of an 'add-on'.

  <%= f.input  :company_id, :as => :string, :class => "span2", :wrapper_html => { :class => "input-append"} %>
  <%= link_to image_tag('/assets/button/magnifier.png'), "#select_company", :"data-toggle" => "modal", :class => "add-on", :wrapper_html => { :class => "input-append"} %>

enter image description here

edit again with the content_tag, it takes it to the separate line enter image description here

Upvotes: 2

Views: 2627

Answers (1)

Marcelo De Polli
Marcelo De Polli

Reputation: 29281

First off, let's create a custom wrapper in the SimpleForm initializer.

In config/initializers/simple_form.rb:

config.wrappers :append, :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.wrapper :tag => 'div', :class => 'input-append' do |append|
      append.use :input
    end
    input.use :hint,  :wrap_with => { :tag => 'span', :class => 'help-block' }
    input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
  end
end

Now let's go back to your form. Be sure to replace @model with the actual instance variable attached to the ActiveRecord model you're using.

<%= simple_form_for @model do |f| %>
  <%= f.input :company_id, :wrapper => :append do %>
    <%= f.input_field :company_id %>
    <%= content_tag :span, link_to(image_tag('/assets/button/magnifier.png'), "#select_company", :"data-toggle" => "modal"), :class => 'add-on' %>
  <% end %>
  <%= f.button :submit %>
<% end %>

Edit: Sorry it took me a bit, ended up having to make a custom wrapper in the end.

Upvotes: 4

Related Questions