Styling select tags in Rails with options_from_collection_for_select using CSS

I need help with a form_tag in Rails. Here is the code snippet:

    <%= form_tag(listings_path, method: :get) do %>
      What 
      <%= text_field_tag :title, "",class: 'form-control' %>

      Category
      <%= select_tag(:category_id, options_from_collection_for_select(Category.all, :id, :name), { :prompt => 'All Categories' }) %>

      Area 
      <%= select_tag(:area, options_for_select(['All', 'Ireland', 'UK']), class: "form-control") %>

      <%= submit_tag 'Search', name: nil, class: "btn btn-primary" %>
    <% end %>

I'm having trouble adding the CSS option >> class: "form-control" << for the Area field. Can anyone suggest where I should add it to make it work correctly? I've tried a few suggestions from Stack Overflow but haven't had any success yet.

Answer №1

The configuration I used in my applications is slightly different from yours, but it still gets the job done.

...

<% categories = options_from_collection_for_select(Category.all, :id, :name) %>
<%= f.select :category_id,  categories, class: "form-control", :include_blank => 'All Categories' %>

...

Answer №2

<%= select_tag "location", options_for_select(['Global', 'USA', 'Canada']), :include_blank => '--Select location--', class: 'input-field' %>

Answer №3

Access the App folder, then navigate to assets and choose the stylesheet directory. Paste the code into any of the scss pages.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ruby on Rails JSON API - flawless JSON without any errors

When I am displaying an array of ActiveRecord items, each has been processed through the valid? method so errors are already defined. The rendering of the array is done as follows: render json: array_of_objects I have ActiveModelSerializers.confi ...

Styling Images Inside a DIV Container Using CSS Float

Considering that I have 2 divs with images and text, I encountered some formatting issues when attempting to float the image to the left using float:left;. The strange formatting is ruining the layout. Below, I've included my code snippet along with a ...

Encountering ActionController::UnknownFormat error while transferring data from an Angular application in Rails 5

Recently, I have delved into learning Angular with Rails. However, I encountered an issue when making a $http.get() request - it keeps returning an error. I suspect that Rails may be rejecting the data. Here is the snippet of my code: View: <div clas ...

Tips on dynamically passing values according to media queries

Within my product section, there is a total of approximately 300 products. To implement pagination, I have utilized the ngx-pagination plugin. The products need to be displayed based on media query specifications. For example, if the viewport size falls wi ...

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

Angular Dynamic Alert Service

Is it possible to customize the text in an Angular Alert service dynamically? I'm looking to make certain words bold, add new lines, and center specific parts of the text. Specifically, I want the word "success" to be bold and centered, while the rest ...

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

Looking for some help with responsive design for the "PORTFOLIO ATTRIBUTES" tab on my website. On desktop, the content displays fine, but on mobile it overlaps and cuts off. Here's the link to the page in question: . Any suggestions on how to maintai ...

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

The collapsible toggle feature is currently not working as intended

I have tried looking for solutions but have not been successful. My apologies for asking what may seem like a simple question. The toggle button is not expanding to show the menu items when clicked. It works fine on the "home" page but not on the linked pa ...

The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...

Hierarchy of importance when multiple style rules affect an element

When an element in HTML has multiple style rules applying to it, what is the precedence order? The rules that apply to an element identified by its unique id come first Next are the rules applied to all elements of a specific class Lastly are the rules th ...

Can MDBootstrap be integrated with Bootstrap for a cohesive design?

After using Bootstrap for many years, I recently started a project where I incorporated the Bootstrap CDN. However, I realized that I also needed certain features and components from MDBootstrap. When I added MDBootstrap, it caused conflicts with the Boots ...

When adjusting the size of the browser window, the div on my web page shifts to the bottom, creating a large empty space at

I have encountered an issue where, when I resize the browser window, my div moves to the bottom and leaves a large space at the top. I would like the div to remain in the center of the page, even if I resize the window to be smaller than the size of the ...

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

Issue encountered with CSS3 animations, failing to perform as intended for various animations

In my project, I have a series of div elements that I am animating in various ways. The first one utilizes a cardflip animation effect: @-webkit-keyframes cardflip { from { -webkit-transform: perspective(2000) rotateY(90deg); -webkit-tra ...

What is the best way to duplicate input fields without causing any issues with unique IDs?

My challenge involves an input form connected to an element that dynamically changes the properties of its children. I am seeking a solution to duplicate or clone this element along with its input form. Currently, I am utilizing element.cloneNode(true) to ...

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not

I'm attempting to achieve a smooth transition effect on a navbar when hovering over it, changing the color from one to another. The navbar contains a list of words, but I am encountering an issue where during the transition, there is a quick flash (ap ...

Consistent manipulation of the DOM through the Drag/Touchmove event

Seeking to incorporate Mobile Components through native Javascript and AngularJS. During my work on developing a Pull To Refresh directive for AngularJS, I utilized the touchmove event on a UL list. The goal was to pull a concealed div over a list with cu ...

Update the Kendo window scrolling feature to include fixed update and cancel buttons

I've encountered an issue while using ASP MVC and the latest version of Kendo. When I add too much content to a Kendo window, it starts scrolling vertically, which ends up hiding the cancel/update buttons at the bottom. This is not ideal as the user s ...

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...