2016-12-12 9 views
0

私は現在Ruby on Rails Getting Started pageに取り組んでいます。私はこれまでに5.10を行った。Ruby on Railsの特定のページのCSSを変更するには

5.10で、検証を追加すると、「新しい記事」ページにタイトルフィールドとテキストエリアがあります。 「記事を保存」ボタンがクリックされると、タイトルフィールドが検証され、空白または短すぎるとエラーがスローされ、ページにエラーメッセージが表示されます。

エラーメッセージが表示されるとき、タイトルフィールドに「タイトル」ラベルとテキストフィールドの間に余分な空白が入ります。

this questionで説明されているように、原因がおそらく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 %> 

添付のスクリーンショット。 Before error After error

答えて

1

あなたはすべてのフォームで、不要な空白を削除するだけではなく、新品のフォームしたいと思うでしょう。

CSSファイルに次のスタイルを追加すると、検証エラーが発生したとき(つまり、divのdivがページにあるとき)にすべてのフォームに適用されます。

div.field_with_errors { 
    display: inline; 
} 
2

あなたはビュー/レイアウト/ application.html.erbでのbodyタグ内のコードの下に与えられた書き込むことによって、新しいCSSファイルを作成することによって、または容易にする方法を使用することによってそれを行うことができます

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

この常に各ページのユニークになるすべてのページのコントローラ名とアクション名をあなたに与えます。

あなたはいつもあなたのapplication.cssの名前をapplication.scss.cssに変更して、scssとcssも書くことができます。あなたが.articleページのコントローラの名前があり、新しいあなたのページのアクションの名前です。ここ

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

をapplication.scss.cssに続いてこれを書いてください。将来的には、CSSとJavascriptのどのページもターゲットにすることができます。

関連する問題