Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Just starting out with RoR and trying to customize my form with CSS classes. Here's what I have so far:

<%= form_tag :action => 'create' do %>
  <p><label for = "name">Name</label>:
    <%= text_field 'books', 'name' %></p>
  <div class="form-control">
  <p><label for = "author">Author</label>:
    <%= text_field 'books', 'author'%></p>
  </div>
  <p><label for = "price">Price</label><br/>
    <%= text_area 'books', 'price'%></p>
  <%= submit_tag "Create" %>
<% end -%>

I'm having trouble getting the form controls to accept classes like

class="form-control mb-4 col-10" placeholder="Patient name"
, similar to
<input type="text" th:field="*{name}" class="form-control mb-4 col-10" placeholder="Patient name">
. Any suggestions on how to style this with CSS?

Answer №1

Make sure to separate the class with a comma

<%= text_field 'books' :title, class:"form-control mt-5 col-12", placeholder="Book title" %>

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

Can CKEditor be integrated with Mutation Observer? If so, how can this be achieved?

Trying to detect changes in the current CKEditor content. The goal is to identify which element's content has been modified when a user writes multiple paragraphs. Not well-versed in JavaScript or jQuery, but managed to come up with this code after s ...

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

I have been experimenting with styling the Select MUI component using the styled function. I am looking to create a reusable style and move away from using sx. Despite trying various methods, I am struggling to identify the correct class in order to direct ...

Steps for converting SCSS to CSS using node-sass

I have a main.scss file with numerous imports from other .scss files. Whenever I make changes to any of the *.scss files, the master.css file is automatically generated. I rely solely on NPM for my build process and do not use Gulp or Grunt! It's imp ...

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

Selection of multiple listings

Looking for a solution to create a multi list selection area? You can double click on an item in the left list to add it to the selected area. Also, you can double click on an item in the selected area to remove it from the list. <ul id="selection"> ...

Tips on saving this information in a MySQL database

I'm currently developing a php script that collects and saves links in mysql. However, I've encountered an issue where the script sometimes captures multiple links for the same download, as shown below: http://www.fileserve.com/file/XXXXXX http: ...

There is a slight gap between the svg element and the path

Here is the size of my path tag (g tag is same size) This is the size of my SVG tag There is a gap between them. These are the inline attributes... <svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-base ...

Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

My approach to beginning a new design always involves overriding the default padding and margin set by the browser on all elements: * { margin: 0; padding: 0; } After coming across j08691's response regarding a margin collapse issue, I discovered th ...

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

Styling components in React using inline styles that are based on JSON values

I'm successfully pulling in JSON data and mapping it within a React component. However, one of the values in the JSON is a HEX code that I want to apply as an inline style for the background color of a div. I have experimented with various methods, b ...

The "initialized" event in angular2-tree-component fires prior to the data being loaded

Utilizing the angular2-tree-component, my goal is to display an already expanded tree. According to Angular docs, the initialized event should be used for expanding the tree after the data has been received: This event triggers after the tree model has ...

A reliable approach for dynamically altering SVG graphics

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...

Buttons within the Bootstrap carousel caption cannot be clicked

I am currently designing a webpage with a Bootstrap carousel that includes a paragraph caption and two buttons. However, the buttons are not functioning as clickable links - when clicked, nothing happens. {% block body %} <div id ="car-container"> ...

Tips for creating a margin on an HTML button's background color

My bootstrap button has dimensions of 46 x 96px and a border radius of 22px. When hovered, I would like the background color to only extend up to 40 x 90px, without filling the entire button. I understand this can be achieved using a box-shadow, but since ...

Ways to attach an item using its lower point instead of its upper coordinate

I am currently working on a poker table project using React. As of now, I have player components that need to be strategically positioned around the table. One challenge I'm facing is that when the screen attribute changes, the position of the top tw ...

The menu will expand to full width, with each list item evenly sharing the width to achieve full coverage

I am currently facing an issue with my horizontal menu on my website. I want the menu to stretch across the full width of the site, but I can't seem to get it right. Here is the code for my menu: <nav> <ul id="menu" class="menu"> &l ...

The Jquery script is ineffective for newly added elements

After creating an Ajax Form that functions well, I noticed that when the result of the form is another form, my script does not work for the new form generated. Is there a way to make the new form function like the old one? $(document).ready(function() ...

center text above images in flexbox when page is resized

When resizing the page, I'm facing an issue where the links overlap with the images in a flexbox layout. It seems like the padding and margin between the images and links are not working due to them not being "related" or connected. I believe I need t ...