I know that is something simple, but I'm stuck.
I have a several forms in my rails3 app to which I need to add tooltips, by using the tipsy. The text in tooltips should be determined in title\original-title, but I just can't figure it out, how to set it for text_field.
<%= f.text_field :what %>
gives me
<input id="name_which" name="name[which]" size="30" type="text">
and I just can't figure it out, where to put the title text.
For example, this one in html works fine
<input type="text" name="tooltipform" title="Tooltip text">
In application.js it is determined by
$(window).load(function() {
$('#form-example [title]').tipsy({trigger: 'focus', gravity: 'w'});
});
I know that is something basic and I'm ashamed of my self. Thank you in advance.
Try with:
<%= f.text_field :what, :title => 'whatever' %>
It's quite simple, pass it as an option:
<%= f.text_field :what, :title => "Tooltip text %>
Other html attributes can also be set as this, such as :class, :id, etc.
Related
I'm using the Materialize admin template and I need to correctly format the checkboxes using Simple Form, adding a span tag around the text value for each checkbox.
I've tried some wrapper options that Simple Form provides and also tried to create my own custom input, but I'm not getting the expected results.
This is the current code in my view, although I've already tried many different things.
<%= f.association :market_segments,
required: true,
label: false,
as: :check_boxes %>
I need the HTML in each checkbox to be like this:
<label>
<input type="checkbox" />
<span>Restaurant</span>
</label>
but I keep getting this:
<span class="checkbox">
<label for="market_segment_ids_1">
<input type="checkbox" />
Restaurant
</label>
</span>
Do I really need to create a custom input to achieve this?
Any help is greatly appreciated!
This will help:
<%= f.association :market_segments, :as => :check_boxes, :label => false, :label_method => lambda { |market_segment| "<span>#{market_segment.name}</span>".html_safe }%>
The above code is for your understanding so that you can achieve your goal.
Source
I'm using simple-form (Ruby 2.5.1, Rails 5.2.3, simple-form 4.1.0) to generate checkboxes for an association. The form element it generates includes an overall title for the section that defaults to the name of the association (in this case, "Menu item tags") and is inside a tag. I want to hide it completely, but can't.
I can change the text to "Test" using label: "Test", but label: false doesn't hide it like I'd expect. I've read the docs and done my best to read the source, but I can't make any progress.
Here's the simple-form call:
f.association :menu_item_tags, as: :check_boxes
And here's the HTML output:
<fieldset class="form-group check_boxes optional listing_menus_menu_sections_menu_items_menu_item_tags form-group-valid">
<legend class="col-form-label pt-0">Menu item tags</legend>
<input type="hidden" name="listing[menus_attributes][0][menu_sections_attributes][0][menu_items_attributes][0][menu_item_tag_ids][]" value="">
<div class="form-check">
<input class="form-check-input is-valid check_boxes optional" type="checkbox" value="1" checked="checked" name="listing[menus_attributes][0][menu_sections_attributes][0][menu_items_attributes][0][menu_item_tag_ids][]" id="listing_menus_attributes_0_menu_sections_attributes_0_menu_items_attributes_0_menu_item_tag_ids_1">
<label class="collection_check_boxes" for="listing_menus_attributes_0_menu_sections_attributes_0_menu_items_attributes_0_menu_item_tag_ids_1">Vegetarian</label>
</div>
</fieldset>
I need to remove the tag on the second line of the HTML. label: false seems like the obvious convention, but it doesn't work.
Edit: This is not a duplicate of Remove outer label from collection_check_boxes. They're using a different function, getting different HTML out, and describing a different problem (that everything is wrapped in a label element). And the solution doesn't fix or affect the behavior I'm describing.
Edit: Here's a simplified version of the form in question, in response to a comment below:
<%= simple_form_for #listing do |f| %>
<%= f.simple_fields_for :menus do |f| %>
<%= f.simple_fields_for :menu_sections do |f| %>
<%= f.simple_fields_for :menu_items do |f| %>
<%= f.association :menu_item_tags, as: :check_boxes %>
<% end %>
<% end %>
<% end %>
<% end %>
= f.association :menu_item_tags, as: :check_boxes, legend_tag: false
You can eliminate the legend that is created by simple form with label: ""
You can do the following in css:
form[name="your_form_name"]>fieldset>legend {
display: none;
}
But it's purely cosmetic
;)
According to documentation:
label: false
should work to hide the generated <legend> element.
I tested this and found that this in fact does not work.
The workaround I found to work was:
label: ''
The <legend> element will still be generated but it will be blank.
I'm new on ROR and
making some front-end html codes to rails form helper codes.
For example, this is the html code,
<input id="username" type="text" placeholder="Username" autofocus required>
If i want to make this to rails form helper code it will be like this,
<%=form.text_field :input, :placeholder => 'Username', :autofocus=>true%>
The problem is, it is really inconvenient translating from html code to rails code.
I don't know the attributes for the rails code, so i had to google all the attributes one by one(ex> rails form.text_field autofocus required) and this is making me developing really slow.
Is there are good api site like w3schools for checking the whole attributes or option inside here?
Both links below are from official ruby on rails site
http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html
http://guides.rubyonrails.org/form_helpers.html
if you simply want to make same input field you need to use this syntax
<%= text_field_tag :username, :placeholder => "Username", :autofocus => true %>
If you use form.text_field in that case rails generate html tag with your object's class for which you have created form_for like:
<% form_for Blog.new do |form| %>
<%= form.text_field :username, :placeholder => 'Username', :autofocus=>true %>
<% end %>
It will generate like this:
<input id="blog_username" name="blog[username]" type="text" placeholder="Username" autofocus required>
Apart from the above ones, this one is also good for the starters
http://www.tutorialspoint.com/ruby-on-rails/rails-html-forms.htm
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.
When I try to create a category by using Ajax I get a strange behavior with my error message.
Right now I have my error message appearing like this:
My create.js.erb and new.js.erb both have the same code which is just this line:
$(".cc-form").html("<%= escape_javascript(render(:partial => 'categories/form', locals: { category: #category })) %>");
This is my category form:
<%= form_for(#category, :remote => true, :html => { :class => "add-form", :id => "cform" }) do |f| %>
<fieldset>
<p>
<%= f.label :name, "Category Name *" %>
<br />
<%= f.text_field :name %>
</p>
<div class="form-actions">
<%= f.submit "Create" %>
</div>
</fieldset>
Here is the code to enable custom error HTML:
# application.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
errors = Array(instance.error_message).join(',')
%(#{html_tag}<span class="validation-error"> #{errors}</span>).html_safe
end
Then the HTML itself along with the error HTML:
<p>
<label for="category_name">Category Name *</label><span class="validation-error"> can't be blank</span>
<br>
<input id="category_name" name="category[name]" size="30" type="text" value=""><span class="validation-error"> can't be blank</span>
</p>
I only want the error message next to the label and not the right side of the input. How would I do this? The format is tricky for me when I look at it.
Thanks.
I guess you use field_error_proc badly, because it's good to wrap the input field into element with special class. Field_error_proc tags both the label and input tag with field_with_error by default since the refered object (:name that means category.name having the errors array) is the same. It's not a defect, because it's good for changing your label's color to red in this case. I checked the Rails code (actionpack/lib/action_view/helpers/tags/label.rb) and you can't turn this behavior off for labels (it can be a feature request), so I guess there's only one solution for your problem if you use plain html for labels.
I have two solutions now for your problem:
Instead of
<%= f.label :name, "Category Name *" %>
use
<label for="category_name">Category Name *</label>
in your view.
It's not too nice, but you can use f.label if you make form .label .validation-error { display: none } in your stylesheet file. I know it's just a workaround, but if f.label is necessary, then I don't know better solution.
You have two of these <span> tags in the page:
<span class="validation-error"> can't be blank</span>
EDIT:
Okay, it looks like both the label and the input need to be wrapped with a custom error. Here are a couple of links:
http://stackoverflow.com/questions/5267998/rails-3-field-with-errors-wrapper-changes-the-page-appearance-how-to-avoid-t
https://gist.github.com/1464315