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

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

ただいまの
回答率

91.25%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 63

keimorimoto

score 6

Ruby: 2.4.1
Rails: 5.1.3

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

# app/controllers/aaa/abc_controller.rb
def create
    @fac = current_owner.facilities.build(fac_params)
    if @fac.save
      flash[:success] = "正常に登録できました。"
      redirect_to :action => "edit", :id => @fac.id
    else
      flash.now[:danger] = "登録内容にエラーがあります。"
      render :new
    end
  end
# app/views/aaa/newhtml.erb
<%= 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が効くようにするにはどうしたらいいでしょうか。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • scivola

    2017/12/12 00:38

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

    キャンセル

  • keimorimoto

    2017/12/12 08:31

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

    キャンセル

  • scivola

    2017/12/12 12:29

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

    キャンセル

回答 1

checkベストアンサー

0

new アクションのときに

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/13 17:52

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

    ありがとうございました!

    キャンセル

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

ただいまの回答率

91.25%

関連した質問

同じタグがついた質問を見る