CODEWITHSUNDEEP
ruby-on-railssimple-form
Deekor
Deekor

Reputation: 9499

simple form add class to surrounding div

I'm writing a custom wrapper for simple form:

## Inputs
b.wrapper tag: :div, class: 'col-lg-4 input-group' do |component|
  component.use :input, class: 'form-control'
  component.wrapper tag: :span, class: 'input-group-addon' do |icon|
    icon.wrapper :icon, tag: :i do
    end
  end
end

The generates the HTML: 

<div class="string optional q_post_date_gteq">
 <div class="col-lg-4 input-group">
  <input class="string optional datepicker form-control" placeholder="Start" type="text" name="q[post_date_gteq]" id="q_post_date_gteq">
  <span class="input-group-addon"><i class="icon-calendar"></i></span>
 </div>
</div>

The <div class="string optional q_post_date_gteq"> seems to be autogenerated. I want to add a class to it, how is this possible?

Upvotes: 5

Views: 6358

Answers (2)

Petr Gazarov
Petr Gazarov

Reputation: 3811

Simple form generates a wrapper div around the input and label by default. There are two ways that I know of to configure html options for your custom wrapper.

1. You can pass wrapper_html option to the form builder in your template:

f.input :some_property_name, wrapper_html: { class: 'your-class' }

2. Pass class option to wrappers when defining custom wrapper:

config.wrappers :your_wrapper_name, class: 'your-class' do |b| ...

There are some great docs about defining custom wrappers in case you need any more help! https://github.com/plataformatec/simple_form/wiki/Custom-Wrappers

Upvotes: 10

Graham Slick
Graham Slick

Reputation: 6870

If you can't find an answer using only ruby, this could do the trick:

$(document).ready(function() {
  $(".q_post_date_gteq").addClass("...");
});

EDIT:

To answer to comments: add a "wrapper" so you have something like this

<div class="simple-form-wrapper">
    <div class="string optional q_post_date_gteq">
     <div class="col-lg-4 input-group">
      <input class="string optional datepicker form-control" placeholder="Start" type="text" name="q[post_date_gteq]" id="q_post_date_gteq">
      <span class="input-group-addon"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

And now, the jQuery part becomes:

$(document).ready(function() {
  $(".simple-form-wrapper").children.first.addClass("...");
});

Upvotes: -3

Related Questions