I'm using simple_form, and I wonder if it's possible to skip any wrapper divs when dealing with an association select.
Thank's
If you're using something like f.association :product you can remove both the generated label and wrapper like so: f.association :product, label: false, wrapper: false
https://github.com/plataformatec/simple_form#stripping-away-all-wrapper-divs
SimpleForm also allows you to strip away all the div wrappers around
the field that is generated with the usual f.input. The
easiest way to achieve this is to use f.input_field.
Example:
simple_form_for #user do |f|
f.input_field :name
end
Produces:
<input class="string required" id="user_name" maxlength="100"
name="user[name]" size="100" type="text" value="Carlos" />
To view the actual RDocs for this, check them out here - http://rubydoc.info/github/plataformatec/simple_form/master/SimpleForm/FormBuilder:input_field
Or ...
Do something like
config.wrappers :small do |b|
b.use :placeholder
b.use :label_input
end
and use it in this way:
# Specifying to whole form
simple_form_for #user, wrapper: :small do |f|
f.input :name
end
https://github.com/plataformatec/simple_form#configuration
use collection_select instead, in haml:
= f.collection_select :position_id, Position.all, :id, :name, {}, { class: 'span3' }
this example assumes you have a position model and want to add span3 as a class on the <select> it generates
Related
I'm using the minicolors ruby gem but it doesn't set the options when I use input_field instead of input, which I need to use.
I have f.input_field :colour, class: "form-control colour", as: :minicolors, input_html: {data: {minicolors: {theme: :bootstrap, position: :right}}} but this is the html it produces..
<div class="minicolors ...">
<input class="form-control minicolors-input ..." input_html="{:data=>{:minicolors=>{:theme=>:bootstrap, :position=>:right}}}" ...>
...
</div>
So something is happening, but not what I would expect or what I want.
The options do work however when I use f.input but I do not want or need the labels and extras that come with using that instead of f.input_field
The method signature for f.input_field is slightly different from f.input, which doesn't really seem to be documented anywhere except the RDoc sort of hints at it
All the given options are sent as :input_html.
So the :input_html isn't needed and your f.input_field call should look like this
<%= f.input_field :title, class: "form-control colour", as: :minicolors, data: {
minicolors: {theme: :bootstrap, position: :right}} %>
I need to add a custom HTML attribute to each option for a select control. I'm using simple_form in Rails. Does anyone know how to do this? The attribute will be consumed by client-side JS.
For instance, I want to do something like this:
<%= f.input :group, collection: #groups, option_html: { data-type: lambda { |g| g[2] } } %>
Which would produce (simplified):
<select>
<option value="1" data-type="primary">First Group</option>
<option value="2" data-type="secondary">Second Group</option>
<option value="3" data-type="secondary">Third Group</option>
</select>
Where #groups might look like this:
[
['First Group', 1, 'primary'],
['Second Group', 2, 'secondary'],
['Third Group', 3, 'secondary']
]
Hoping to avoid having to make a custom control/wrapper. Thanks!
You're close! easiest way is actually not using simple_form here. here's the simple_form documentation
<% options = #group.map { |g| [g.name, g.id, {'data-type' => g.group_type}] } %>
<%= f.input :group, label: 'Group' do %>
<%= f.select :group, options, include_blank: 'Select a Group', class: 'form-control' %>
<% end %>
For your exact code it would be:
<% options = #group.map { |g| [g[0], g[1], {'data-type' => g[2]}] } %>
<%= f.input :group, label: 'Group' do %>
<%= f.select :group, options, include_blank: 'Select a Group', class: 'form-control' %>
<% end %>
simple-form only:
= f.input :group, #groups.map{|l| [l[0], l[1], {data: {type: l[2]}}]}
A (small) drawback using f.input do end method is that any default input html options (like simple form's required or optional classes or the required attribute) and any default options (like b.use :input, class: 'input-element') are missing when simply passing a block to f.input, tldr: the input does not get decorated.
If you rely on these extra classes and attributes, you'd have to manually pass them in (not dry).
To overcome this I've created a custom input for my special selects, so I can define the body of my select like I want (the <option> tags) but the select gets decorated as usual:
# app/inputs/select_container_input.rb
class SelectContainerInput < SimpleForm::Inputs::Base
def input(wrapper_options)
options_html = input_options.delete(:options_html)
# since we pass our options by our self (and have to select the correct
# option), set `selected` to `''` to prevent rails calling
# `object.send(attribute_name)` only to set `selected` which is not used.
input_options[:selected] = ''
merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
#builder.select attribute_name, nil, input_options, merged_input_options do
options_html
end
end
end
Simply call it like this:
<% options_html = capture do %>
<option>bla</option>
<% end %>
<%= f.input :attribute, as: :select_container, options_html: options_html %>
The options_html is a workaround, because actually it would be easier to pass in a block to our custom input:
<%= f.input :attribute, as: :select_container do %>
<option>bla</option>
<% end %>
But due to the way SimpleForm::FormBuilder#def_input works, the block gets carried away before code even touches the inputs. So no way without refactoring simple_form.
All in all this solves the problem with a little bit extra noisy code in your views for your special selects.
For an association select:
f.association :product, collection: Product.all.map { |product| [product.name, product.id] }
This seems to be the correct way of doing this:
Rails Simple Form custom association select field
Using a new/unchanged installation of simple_form 3.0.0.rc on rails 4.0.0.rc1, this view code
<%= simple_form_for #order do |f| %>
<%= f.input_field :email %>
<%= end %>
produces this output
<input class="string email optional" id="order_email" maxlength="255" name="order[email]" size="255" type="text" />
but I had expected the output not to include maxlength and to set type to 'email', much like the #input method does:
<input class="string email optional" id="order_email" name="order[email]" type="email" />
My expectations come from the fact that simple_form.rb includes the following default values:
b.use :html5
b.optional :maxlength
What do I need to do to make the input attributes from #input_field default to the same as #input?
Input field helper method will take hash you pass to it in second argument and turn them info html attributes. Look at the code below, should do the trick:
<%= simple_form_for #order do |f| %>
<%= f.input_field :email, :type => :email, :maxlength => nil %>
<% end %>
According to the docs input_field method takes all the options as input_html option except :as, :collection, :label_method, :value_method keys. I tried adding :as => :email but no avail. But you could use :type => :email to get type="email" in the rendered html. And according to the source of the method it uses some defaults as well.
So for getting the email field:
<%= simple_form_for #order do |f| %>
<%= f.input_field :email, :type => :email %>
<% end %>
I think its related to your database field... I think you have set the databasefield as string, which hast 255 maximum length in general.. This could be the reason why it adds 255 automatically?
Using Rails 3 with Twitter Bootstrap and Simple_form, I am having issues changing the length of the input box in this field:
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price %>
<span class="add-on">.00</span>
<% end %>
</div>
Others say to add this after the :price variable:
:input_html => {:size => 15}
The 'do' loop seems to change the rules, any suggestions?
try
:style => "width: 100px;"
Twitter bootstrap has css classes for this. Depending on what size you want you can add class input-min, input-small, input-large and so on. You can also use the span classes, e.g. span1, span2, etc.
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price, :class => 'input-medium' %>
<span class="add-on">.00</span>
<% end %>
</div>
I am using the f.input form to create controls with labels in a :class => 'form-horizontal' form, using a class attribute or style attribute (directly or as a hash, any way I tried) didn't work for me, and had zero effect on the generated HTML.
This is what worked for me:
<%= f.input :description, input_html: { class: 'span12' } %>
This works with both the Bootstrap column layout classes ('span1', 'span2', etc,) the input sizing classes ('input-large', 'input-xxlarge', etc,) or whatever custom class you want. The trick is using the input_html key. You can also mess with the label using the label_html key but that's likely to mess up the form-horizontal layout.
It looks like the size key in :input_html => {**:size** => 15} is ignored by SimpleForm... when I tired this it did not affect the HTML output.
I found this here in the SimpleForm docs:
https://github.com/plataformatec/simple_form#usage
I'm trying to create a form with some custom data attributes on the inputs:
<input type="text" data-family="Dinosaurs">
This seemed like a nice clean way to have easy front-end access (haha!) with jquery:
$("[data-family='Dinosaurs']").doSomething()
The problem is I can't get Rails (3.0.3) to render the attribute.
<%= f.text_field :question, :id=>"poll_question", :class=>"BigInput", :style=>"width:98%;", :attributes=>"data-submit_clear='1'" %>
I've tried many permutations to no avail and can't find an example of how to do this. Do I need to modify the text_field helper to support any custom attributes?
Oops. It's just
<%= f.text_field :question, :id=>"poll_question", :class=>"BigInput", :style=>"width:98%;", 'data-submit_clear'=>'1' %>
Rails >3.1 has a handy shortcut for data-attributes like this which most HTML-generating helpers support:
<%= f.text_field :question, :data => { :submit_clear => '1' } %>
It can make things more readable when you have a couple of data attributes, e.g.:
<%= f.text_field :question, :data => { :submit_clear => '1', :more_info => 'Ok', :also => 'this' } %>