How to Use The Bootstrap Form Select CSS with a Rails Model

How do I use the Bootstrap form select css with a Rails model?

First of all, for bootstrap's form-control class to work, you must add it to select tag itself

Per apidoc of rails form select

select(object, method, choices = nil, options = {}, html_options = {}, &block)

you can add html class as

<%= f.select(:ampm, options_for_select([['AM', 1], ['PM', 2]]), {}, {class: "form-control"}) %>

or simply

<%= f.select :ampm, [['AM', 1], ['PM', 2]], {}, {class: "form-control"}) %>

rails select option styling with bootstrap

You could style it like this <%= f.select :willingToRelocate, ['Yes', 'No'], {}, class: 'form-control'} %>

You could check out this link. The api.rubyonrails have a great amount of information that you could use for these kind of problems.

how to add a class css in a form select on ruby on rails?

select takes two options hashes, the second for html options.

To build on your example code in a single (long) line:

= f.select :status, [['Activo', 1], ['Inactivo', 2]].each { |c| content_tag(:option, c.first, value: c.last) }, {}, class: "form-control"

This produces the same HTML as:

= f.select :status, [['Activo', 1], ['Inactivo', 2]], {}, class: "form-control"

select docs

How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

<%= f.select :category_id, Category.all.map { |c| [c.name, c.id] }, include_blank: true, input_html: {class: 'form-control'} %>

The 'input_html' property is what you want to use.

How do you add a css class (Bootstrap) to a select field with a loop inside in Rails?

Looking at the docs: http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select
The method is as follows:
select(object, method, choices = nil, options = {}, html_options = {}, &block)
Since you're passing a block and the object argument is the f variable, the following should work:

<%= f.select(:avaliador_id, {}, {class: "form-control"}) do %>
  <% @usuarios_array.each do |u| %>
    <%= content_tag(:option, u.first, value: u.last) %>
  <% end %>
<% end %>

However, I'm not sure if that will account for the choices argument, so it may instead be:

<%= f.select(:avaliador_id, nil, {}, {class: "form-control"}) do %>
  <% @usuarios_array.each do |u| %>
    <%= content_tag(:option, u.first, value: u.last) %>
  <% end %>
<% end %>

f.select in Rails not applying Bootstrap

Per the documentation, the method signature for select is:

select(object, method, choices, options = {}, html_options = {})

html_options, which is where your HTML attribute options like :class should go, comes after options, but you're omitting options and putting html_options right after choices. Try this instead:

<%= f.select :customer_type, options_for_select(["Retail","Contractor","Dealer"]), {}, class: "form-control" %>

P.S. If you're wondering why the method signature specifies object, but in actual use we never pass object (method is always first), it's because we're not actually calling this method directly. When we call f.select(...) inside a form_for block, Rails calls select(f.object, ...) for us.

Select List with the width of the form in Bootstrap

You can do it a few different ways. You can either add an inline style to the div.form-group or use Bootstrap's grid system. Here's two examples:

<div class="form-group" , style="width: 200px">
  <label>Group</label>
  <select class="form-control" ng-model="data.groupSelect">
    <option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
  </select>
</div>

<div class="row">
  <div class="col-sm-3">
    <div class="form-group">
      <label>Group</label>
      <select class="form-control" ng-model="data.groupSelect">
        <option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
      </select>
    </div>
  </div>
</div>

JSFiddle

---

Related Topics