How to change css for a specific page in Ruby on Rails

Question

I'm currently working on Ruby on Rails Getting Started page. I have done 5.10 so far.

At 5.10, adding validation, there are the title field and the text area in the "New Article" page. When the "save article" button is clicked, title field is validated, and if it is blank or too short, error is thrown, and the error message is rendered in the page.

The problem I have is when error message is rendered, the title field gets an extra blank space between "Title" label and its text field.

The cause is probably div block's default behavior, as described in this question.

Before error:

<label for="article_title">Title</label>

After error:

<div class="field_with_errors">
  <label for="article_title">Title</label>
</div>

So, I want to edit css for only this "New Article" page, to remove an extra blank space. But I have no idea how to do that. Probably The change to css that I need to add is the following:

div.field_with_errors {
  display: inline;
}

Do I need to add some code to the erb file, or create a css file for this page?

The following is code in app/views/articles/new.html.erb.

<h1>New Article</h1>

<%= form_for :article, url: articles_path do |f| %>

  <% if @article.errors.any? %>
    <div id="error_explanation">
      <h2>
        <%= pluralize(@article.errors.count, "error") %>
        prohibited this article from being saved:
      </h2>
      <ul>
        <% @article.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

<%= link_to 'Back', articles_path %>

And, attached screenshots.

Neeraj Rana · Accepted Answer · 2016-12-12 15:03:44Z

3

You can do it by creating new css file also or by using an easier method by writing given below code inside body tag of in views/layouts/application.html.erb

<body  class="<%= controller_name %> <%= action_name %>">

This will define always give you name of controller and name of action on every page which will be Unique for every page.

You sould always rename your application.css to application.scss.css so you can write scss also and css also. Then write this in you application.scss.css

.article .new{
div.field_with_errors {
  display: inline;
}
}

Here .article is name of controller of your page and new is name of action of your page. This will be helpful in future you will be able to target any page in CSS and Javascript also.

edited Dec 12, 2016 at 15:03

answered Dec 12, 2016 at 8:42

Neeraj Rana

4524 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun Kumar Mohan · Accepted Answer · 2016-12-12 08:49:31Z

1

You'll want to remove the unwanted blank spaces in every form, and not just the new article form.

Add the following style to your css file and it will be applied to all forms when a validation error occurs(ie. when a div with the class of field_with_errors is present in the page).

div.field_with_errors {
  display: inline;
}

edited Dec 12, 2016 at 8:49

answered Dec 12, 2016 at 8:37

Arun Kumar Mohan

11.9k3 gold badges27 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to change css for a specific page in Ruby on Rails

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related