The code illustrating the bug is from a Redmine plugin. A _form.html.erb partial contains this fields_for:
<%= f.fields_for :information do |information| %>
<p><%= information.text_field :middlename, :label => l(:label_people_middlename) %></p>
<p><%= f.text_field :lastname, :required => true %></p>
Then one of the fields declares a label:
<p><%= information.select :gender, Person.get_genders, :label => l(:label_people_gender)%></p>
That generates this HTML:
<p><label for="person[information_attributes]_gender">Gender</label>
<select name="person[information_attributes][gender]" id="person_information_attributes_gender">
<option selected="selected" value="0">Male</option>
<option value="1">Female</option>
</select></p>
The <label for=""> value has [] in it instead of underscores _, so it does not match the target field's id="person_information_attributes_gender". Clicking on the label does not put the keyboard focus into that <select> field.
Is this a known bug in Rails 4.2.8? Is there a fix or workaround available - besides just writing the <label> in raw HTML?
What happens if you try using an actual Rails label, instead of passing label as an option to the 'select'? (I'll be honest, I haven't actually seen the label option on a select like that, before). Something like this:
<p>
<%= information.label :gender, l(:label_people_gender) %>
<%= information.select :gender, Person.get_genders %>
</p>
Related
I need to add a data attribute to an f.association input in a simple form. To do this I found this article and subsequent reference to simpleform's documentation. It is easy enough to add classes with the standard syntax, I am wondering why it's proving difficult using a wrapper.
So rather than the standard:
<%= f.association :size, input_html:{class: 'sku-suffix-component'} %>
I am using:
<%= f.input :size, as: :select, input_html:{class: 'sku-suffix-component'} do %>
<%= f.select :size, Size.all.map{ |s| [s.name, s.id, {'data-code-num' => s.code_num}] } %>
<% end %>
Much to my frustration, the added class is nowhere in the <select> tag (not to mention the missing other default classes and id naming convention [id="product_size_id" becomes id="product_size"]). I have tried various syntaxes and placements of the input_html hash.
Below you can see the difference in appearance etc. On the right is using the standard syntax.
And here is the resulting html:
<select name="product[size]" id="product_size"> (...)
Compared with:
<select class="form-control select required sku-suffix-component" name="product[color_id]" id="product_color_id"> (...)
Try this solution and if it is possible than create some link for jsfiddle so we can test and try to find solution
<%= f.input :size do %>
<%= f.select :size, Size.all.map { |s| [s.name, s.id, { class: 'sku-suffix-component', 'data-code-num' => s.code_num }]}, input_html: { class: 'sku-suffix-component' }, include_blank: true %>
<% end %>
I found the solution combining strategies that I found on separate posts.
The long and the short of it was to utilize the map method but not within a custom input wrapper.
<%= f.association :size, collection: Size.all.map{ |s| [s.name, s.id, {'data-code-num' => s.code_num}]}, input_html:{class: 'sku-suffix-component'} %>
This nets perfectly my desired <select> with an added class, and the <option>'s with a custom data- attribute.
<select class="form-control select required sku-suffix-component" name="product[size_id]" id="product_size_id">
<option value=""></option>
<option data-code-num="001" value="113">onesize</option>
(...)
I want to put this: <%= f.text_field :name %>
into the code below, but I keep getting an error. How can I properly embed it so that the code will work. Thanks!
<form>
<div class="form-group">
<input type= class="form-control" id="exampleInputEmail1" placeholder="Enter Value">
</div>
</form>
You dont' need the whole input section, just do this :
<%= f.text_field :name , :class=> "form-control"%>
Just add bootstrap classes into your code via parameter :class
Use Formtastic Bootstrap it's a gem for rails, create forms with automatic bootstrap class
'f' is not instantiated in you code so following code will raise error in the form-
<%= f.text_field :name %>
alternatively you can use this -
<%= text_field_tag :name,'', :placeholder => "Enter Value", :class=>"form-control", :id=>"exampleInputEmail1" %>
this will not raise any error on embedding in the form.
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?
I would like to add a span element to my i18n localized label in Rails 3.2.3.
This is what I've got:
<%= f.label :address, "<span class=\"optional\">optional</span>".html_safe %>
However, in the output it produces:
<label for="person_address">
<span class="optional">optional</span>
</label>
What I need is this:
<label for="person_address">
Address <span class="optional">optional</span>
</label>
Can anybody tell me how to do this?
use the block form and translate the attribute name "manually" :
<%= f.label :address do %>
<%= f.object.class.human_attribute_name :address %>
<span class="optional">optional</span>
<% end %>
note
The second parameter in the 'label' helper will be the text of the label. If you did this:
<%= f.label :address, "Address <span class=\"optional\">optional</span>".html_safe %>
It would show correctly, I think.
You an also add html to the yml file and use .html_safe on the yml item explicitly it would also work.
<%= f.label :address, t('path.to.label').html_safe %>
I'd also be tempted to try something with javascript and css - to class the field and add something via jquery or with a css :after to the label.
I'm constructing a simple form in ERB but the HTML produced by the text_field tag makes the for attribute in the label tag invalid.
<div>
<p><%= label_tag "email[name]", "Name" %></p>
<%= text_field :email, :name, :class => "text_field" %>
</div>
Produces the HTML
<div>
<p><label for="email[name]">Name</label></p>
<input class="text_field" id="email_name" name="email[name]" size="30" type="text" />
</div>
Which results in the error
character "[" is not allowed in the
value of attribute "for".
How do I generate the text with without the nested parameter name email[name] to change the label tag for attribute? Is there an alternative approach that produces valid HTML?
The for attribute is supposed to reference the ID attribute of the element for which it is the label, not its name.
Therefore, don't you need:
<div>
<p><%= label_tag "email_name", "Name" %></p>
<%= text_field :email, :name, :class => "text_field" %>
</div>
...?
Take it out of the quotes, or generate the div content as a string and add it to the div.innerHTML