CODEWITHSUNDEEP
htmlcssruby-on-railssimple-formcollection-select
Mel
Mel

Reputation: 2687

Rails - simple form - adding html options to collection select

I am trying to make sense out of the instructions in this sheet:

http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select

My objective is to make the select menu wider than the default width.

I have this form input:

<%= f.input :trl, label: false do %>
        <%= f.select :trl_id, Trl.all.map { |t| [t.try(:title), t.try(:id)] },
                include_blank: false,
                prompt: 'Select one',
                input_html: { "width: 200px" }
                %>
        <% end %>

At the moment, the default width html for the select drop down is super tiny. I'm trying to get the select to accept a html attribute for width.

I have tried about 50 different permutations of the above. I can't find a way that works.

From the instructions in simple form, I'm directed to the instructions in the above link. Those tell me that the structure of the input form field should follow this format:

collection_select(object, method, collection, value_method, text_method, options = {}, html_options = {})

From what I can decipher, I think I need as many comma separated fields as are in this example. So that's 7 in total. That's an assumption because I can't tell if you just skip the ones that I don't want to use or do something else to indicate that there is no entry for that particular field. Following that assumption, I have:

<%= f.input :trl, label: false do %>
        <%= f.collection_select(:trl_id, Trl.all.map { |t| [t.try(:title), t.try(:id)] },
                include_blank: false,
                prompt: 'Select one',
                html_options = { width: 200px })
                %>
        <% end %>

This gives me an error that says:

syntax error, unexpected tIDENTIFIER, expecting '}'
                html_options: { width: 200px })
                                            ^

I can't find an english language translation of what tIDENTIFIER is or means. Most stack overflow questions referencing this term generally indicate that something is wrong with the syntax.

I'm struggling because I can't understand the apidock instructions in the first place. Do I need to add some more blank fields along the way? If I do, do I just write two commas in a row to indicate a blank field?

There are 7 fields in the api dock example. I think my attempts are missing content for value method and text method. I don't know how to indicate to rails that I don't have any content for them. None of the examples in the API dock indicate blank fields, so I am thinking that less than 7 fields should be acceptable.

I'm also not sure where else to search for the definition of tIDENTIFIER. There may be a clue in that term that I can't access because I can't find the meaning of the term.

Can anyone help?

Upvotes: 1

Views: 1287

Answers (1)

Hecatonchier
Hecatonchier

Reputation: 113

Late response, but see: https://api.rubyonrails.org/v7.0.2.3/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select and How do I set the HTML options for collection_select in Rails?

Essentially, the collection select definition looks like

collection_select(object, method, collection, value_method, text_method, options = {}, html_options = {})

as you rightly mentioned in your question, therefore try to apply your pre-defined css classes within the html_options curly braces. If you have nothing to declare for the options {} that come before the html_options (e.g disabled options), leave it empty, e.g.

<%= form.collection_select :driver_id, Driver.order(:full_name), :id, :full_name, {}, {class: "driver_name_css"} %>

I believe your code would look like:

  <%= form.collection_select :driver_id, Driver.order(:full_name), :id, :full_name, {}, {style: "width: 200px"} %>

or

  <%= form.collection_select :driver_id, Driver.order(:full_name), :id, :full_name, {}, {class: "pre-defined-css-class-with-desired-width"} %>

Upvotes: 0

Related Questions