如何在Ruby on Rails中更改特定頁面的CSS

Question

我目前正在研究Ruby on Rails入門頁面。 到目前為止，我已經完成了5.10。

在5.10，添加驗證，“新建文章”頁面中有標題字段和文本區域。 單擊“保存文章”按鈕時，標題字段將被驗證，並且如果該字段為空白或太短，則會引發錯誤，並在頁面中顯示錯誤消息。

我遇到的問題是，在呈現錯誤消息時，標題字段在“標題”標簽與其文本字段之間獲得了一個額外的空格。

原因可能是div塊的默認行為，如本問題所述。

錯誤之前：

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

錯誤后：

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

因此，我只想為該“新文章”頁面編輯CSS，以刪除多余的空白。 但是我不知道該怎么做。 可能我需要添加的對CSS的更改如下：

div.field_with_errors {
  display: inline;
}

我是否需要在erb文件中添加一些代碼，或者為此頁面創建一個CSS文件？

以下是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 %>

並且，附有截圖。

Answer 1

您也可以通過創建新的CSS文件或使用更簡單的方法來做到這一點，方法是在views / layouts / application.html.erb的body標簽內編寫以下代碼

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

這將定義始終為您提供控制器的名稱以及每個頁面上的操作名稱，這對於每個頁面都是唯一的。

您總是將自己的application.css重命名為application.scss.css，這樣您就可以同時編寫scss和CSS。 然后在您的application.scss.css中編寫

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

在這里.article是頁面的控制器名稱，而new是頁面的動作名稱。 將來這將對您有所幫助，您還可以定位CSS和Javascript中的任何頁面。

Answer 2

您將要刪除每種表格中不需要的空格，而不僅僅是新的文章表格。

將以下樣式添加到您的css文件中，當發生驗證錯誤時（即，當頁面中存在具有field_with_errors類的div時），它將應用於所有表單。

div.field_with_errors {
  display: inline;
}

如何在Ruby on Rails中更改特定頁面的CSS

問題描述

2 個解決方案

解決方案1
2 2016-12-12 08:42:11

解決方案2
1 已采納 2016-12-12 08:37:22

如何在Ruby on Rails中更改特定頁面的CSS

問題描述

2 個解決方案

解決方案1 2 2016-12-12 08:42:11

解決方案2 1 已采納 2016-12-12 08:37:22

解決方案1
2 2016-12-12 08:42:11

解決方案2
1 已采納 2016-12-12 08:37:22