Cannot add styling to Select field in rails - ruby-on-rails

I am using twitter-bootstrap in my rails app.
<%= f.select :rating, options_for_select([["Good","1"],["Average","2"],["Poor","3"]]), :class => "form-control" %>
But the form-control class is not working in select field
please help me to get the style working.
Thanks.

If you look at the docs, the class key is part of the last argument, which is a hash. Before that there's an options hash:
f.select :rating, options_for_select([["Good","1"],["Average","2"],["Poor","3"]]), {}, class: "form-control"
Here's an example using the options hash:
f.select :rating, options_for_select(...), { include_blank: "Choose" }, class: "foo"

Related

How to add html class to rails f.select field?

I have found a few similar articles on stack but none of these examples seem to do the trick.
I'm calling map on an object, to create options in an f.select field, and I'm also using Include_blank option, then trying the class and the class will not work.
I've tried the following:
<%= f.select(:city_race_id, #city_races.map {|n| [n.office, n.id]}, include_blank: true, html: { class: "form-control" }) %>
and
<%= f.select(:city_race_id, #city_races.map {|n| [n.office, n.id]}, include_blank: true, :class => 'form-control' ) %>
both render form and doesn't break rails, but neither show styling.
Try this way :
<%= f.select(:city_race_id, #city_races.map {|n| [n.office, n.id]}, {include_blank: "Select something"}, { :class => 'form-control' }) %>
select helper takes two options hashes, one for select, and the second for html options. you can also add prompt option.

Change the option selected on collection_select

I'm trying to change the option that is selected on collection_select on my form in rails.
My code look like this:
<%= f.collection_select :course_type_id, CourseType.where(:deleted => false), :id, :name, {}, {class: 'form-control m-b', :selected => #course_template.course_type.name } %>
However the option selected always shows the first one and never changes unless the user selects a different option.
The resulting html looks like this:
<select class="form-control m-b" selected="selected" name="course[course_type_id]" id="course_course_type_id">
<option value="1">Driving</option>
<option value="2">Pratical</option>
</select>
Any ideas on what I'm doing wrong?
It looks like you're putting the :selected key in the html_options argument attributes.
Here is the method definition for collection_select:
collection_select(object, method, collection, value_method, text_method, options = {}, html_options = {})
Try this:
<%= f.collection_select :course_type_id, CourseType.where(:deleted => false), :id, :name, {:selected => #course_template.course_type.name}, {class: 'form-control m-b' } %>
<%= f.collection_select :course_type_id, CourseType.where(:deleted => false), :id, :name, { :selected => #course_template.course_type.id }, {class: 'form-control m-b' } %>
The selected parameter takes the value, and not the name of the option.
From collection_select definition, selected option and html_options are different params.
For further understanding, refer here.

How to use Bootstrap Multiselect in Rails views?

I am trying to implement bootstrap multiselect field in my rails app.
Making use of the bootstrap-multiselect_rails gem found here (https://github.com/TrevorS/bootstrap-multiselect_rails)
Have it installed and configured successfully but in my form am not able to select multiple vales. It allows me to select only an single value.
Right now my code looks like this:
<%= f.collection_select :role_pm, User.where(:user_role => 'Project Manager'), :name, :name, {}, {:multiple => 'true'}, {class: "role_pm"} %>
Where am I going wrong?
Finally got this working. I have Update the line of code in this answer which has caused me a lot of agony over the past 2 days or so
<%= f.collection_select :role_pm, User.where(:user_role => 'Project Manager'), :name, :name, {}, :multiple => 'true', :class => 'role_pm' %>
Looks like I have passed both multiple and class attributes as seperate arrays which was really not needed in the first place.
.You need to initialize Multiselect using the js.
here comes my working code:-
###HTML FILE
##my controller has #event_types to autopopulate the values as well for edit action
<label for="events" class="control-label form-group col-md-12">Event Type: </label>
<div class="form_group col-md-12">
<div class="btn-group">
<%= select_tag("event_types", options_for_select(#event_types.pluck(:name),:multiple=>true,:required=>true) %>
</div>
</div>
###js FILE-initialise using id/class for multiselect
$('#event_types').multiselect({
enableFiltering: true,
filterBehavior: 'text',
enableCaseInsensitiveFiltering: true,
nonSelectedText: 'Select the type of events'
});
you can use selected attribute in select tag to select those values during edit action.Just pass it from controller..example
:selected => #event_types.new_record? ? nil : #event_types.pluck(:name)
rewriting your query...
<%= select_tag("event_types", options_for_select(#event_types.pluck(:name),:multiple=>true,:required=>true) %>
changes to :Showing names in select dropdown list
<%= select_tag("role_pm", options_for_select(User.where(:user_role => 'Project Manager').pluck(:name).uniq,:multiple=>true,:required=>true) %>

Include blank and default for collection_select helper

I would like to have a "select an option" option in my dropdown on my rails application.
I am using the collection_select helper tag and it looks something like this:
<%= collection_select(:country, :id, Country.order('name ASC'), :id,:name, {},{:class => "input-xlarge"}) %>
I want the default option of the drop-down to be "Select a country".
Use the include_blank option:
<%= collection_select(:country, :id, Country.order('name ASC'),
:id, :name,
{ include_blank: 'Select a country' },
{ :class => "input-xlarge" }) %>
See the official documentation here

How to use a table column in my select box on rails?

I'm trying to create a select box that takes data from my db. I'm having trouble setting this up. I tried this code:
<%= f.fields_for :unit do |u| %>
<%= u.label :name %>
<%= u.select :name, :class => "ingredient_unit", :prompt => "Please Select" %>
<% end %>
but I'm missing the part of the choices, I don't know how to pull them out of the database. I tried using collection_select, which worked, but then the class option wasn't working... collection_select went like this:
<%= u.collection_select :unit, Unit.all, :id, :name, :class => "ingredient_unit", :prompt => "Please Select" %>
I also don't understand what the first symbol means (:unit), it seems to be setting the html id and name, so that can be anything I want it to be?
You should look at the documentation for collection_select and select. But to answer your question, for the select part, you forgot to pass the list of options to choose from. You also need to swap the order for prompt and class since prompt is an option for the helper and class is an html option
<%= u.select :unit_id, Unit.all.map { |u| [u.name, u.id] }, { :prompt => "Please Select" }, { :class => "ingredient_unit" } %>
For the collection select
<%= u.collection_select :unit_id, Unit.all, :id, :name, { :prompt => "Please Select" }, { :class => "ingredient_unit" } %>
The first parameter passed to both helper is the column name where you want the selected answer to be saved. The 2 codes above just shows 2 different ways to generate the same select tag.
The first symbol tells it which field to populate with the id returned from the user selection.
Also, you should wrap your class section in {}
:unit refers to the model attribute that you're using for the select element. Yes, it will setup the name/id of the element (and name is the most important for the params hash).
To set a class in the collection_select, specify it as a hash as that helper takes it as an html_option.
<%= u.collection_select :unit, Unit.all, :id, :name, { :prompt => "Please Select" }, { :class => "ingredient_unit" } %>

Resources