質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

4020閲覧

Rails5 newでバリデーションエラー後、createでrender :new したらレイアウトが崩れる

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2017/12/11 12:38

Ruby: 2.4.1
Rails: 5.1.3

コントローラーのcreateでrender :newをした際、表示された画面でCSSが効いていない状態です。色々状況を確かめたところ、text_field内のclass指定が解除されており、renderで再度読み込まれたviewファイルにclassが効いていないのではないかと思います。

Ruby

1# app/controllers/aaa/abc_controller.rb 2def create 3 @fac = current_owner.facilities.build(fac_params) 4 if @fac.save 5 flash[:success] = "正常に登録できました。" 6 redirect_to :action => "edit", :id => @fac.id 7 else 8 flash.now[:danger] = "登録内容にエラーがあります。" 9 render :new 10 end 11 end

Ruby

1# app/views/aaa/newhtml.erb 2<%= f.text_field :name, :placeholder => "名前", :maxlength => 50, :class => "mb10 w_full" %>

↑の:class => "mb10 w_full"は初期読み込み時(バリデーションエラー前、つまりactionでいうnewで読み込んだ際)はclassがちゃんと効いているのですが、エラー後(つまりactionのcreateでelseに入り、renderで呼び出された際)はclassが効いていない状態です。

renderで読み込まれた際にもちゃんとclassが効くようにするにはどうしたらいいでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

scivola

2017/12/11 15:38

「classが効いていない状態」というのは,HTML を確かめたら class 属性が付いていないことが分かった,ということでしょうか。それとも,見た目で期待した体裁になっていない,ということでしょうか。
退会済みユーザー

退会済みユーザー

2017/12/11 23:31

renderで表示されたページで「ソースを見る」を見ても打ち込んだHTMLが表示されないので見た目ではありますが、正しく表示されているnewの画面でclassを外した状態と全く同じになることを確認しております。という意味では見た目でになってしまいますが、renderで指示したviewソースにclassがついているのについていないレイアウトになってしまっているところが問題点となります。
scivola

2017/12/12 03:29

ソースに出ない原因はわかりませんが,DOM インスペクターではどう見えますか。Firefox なら,入力欄で右クリックして「要素を調査」で。
guest

回答1

0

ベストアンサー

new アクションのときに

html

1<input type="text" name="item[name]" id="item_name" />

だった入力欄が,create でエラー付きだと

html

1<div class="field_with_errors"> 2 <input type="text" value="XXXX" name="item[name]" id="item_name" /> 3</div>

のように構造が変わります。入力欄の回りを赤で囲むためですね。

そのため,CSS で子セレクターを使っていたりすると,効くはずのスタイルが効かない、ということがあります。

投稿2017/12/12 03:27

scivola

総合スコア2108

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/13 08:52

ありがとうございます!おっしゃられるとおり、divで囲まれてしまうが故に崩れていました。divで囲むのではなくinputタグ内にエラーのclassが挿入されるよう、下記の記事のように施して、解決しました。 https://qiita.com/SaxtonDrey/items/ef186bd3024d4f0e6ef3 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問