deviseのエラーメッセージでbootstrapのレイアウトが崩れる

Question

deviseのエラーメッセージが出るときにbootstrapで作成したレイアウトが崩れてしまいます。```

<h2>新規登録</h2> <div class="row"> <div class="col-md-6 col-md-offset-3">

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>

<div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "off" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off" %> </div> <div class="actions"> <%= f.submit "Sign up",class: "btn btn-primary" %> </div> <% end %> </div> </div> コード ```  これとは別にcustom.css.scssというファイルでcssを調整しているのですが、エラーメッセージ時のレイアウトが安定しません。通常時は大丈夫なのですが、なぜこのような現象になってしまうのでしょうか。今のところcssでエラーメッセージ時のレイアウトは調整してないのでbootstrapのクラス名に何かがおかしいのかなと思うのですが

修正後の通常時

Answer 1

もしかして特定のページでだけ custom.css.scss を読み込むようにしていませんか？
だとすると turbolinks のせいかもしれません。

• どこかのページから遷移してきた時にうまく表示されない
• ブラウザの「更新」で直接ページを表示した時はうまく表示される

という状況だと、だいたい turbolinksのせいです。

もしその状況なら、

• turbolinksをOFFにする
• 常に全部のスタイルシートを読み込むようにする

のどちらかが楽だと思います。

Comments

[kumamo-n]

turbolinksをoffにしてcustom.css.scssで
.field{
margin:0 auto;
}
としてもやはりレイアウトは崩れたままです。これは私がcssの適用を間違えているだけなのでしょうか？

[hello-world]

すいません、勘違いしていました。 devise_error_messages の部分のデザインがおかしいということなんですね。

崩れているページのスクリーンショットと、崩れている時のスクリーンショットをアップロードしてもらえたりしませんか？

[kumamo-n]

そうですね。通常時は中央に綺麗にレイアウトが整えられているのですが、エラーメッセージ時に限って上記の画像を見てわかるようにずれてしまいます。　新たに編集で崩れているページの画像を貼り付けました、これで大丈夫でしょうか？　custom.css.scssでは
.row{
text-align:center;
}
というかんじでレイアウトを中央揃えにしているのですがエラーメッセージ時だとどうしてもレイアウトが適用されないというか、修正ができません。

[hello-world]

1. rowに対するCSSの適用をやめる。（col-md-6 col-md-offset-3 についてももし存在していたら消す）
2. <div class="field"> を <div class="field text-center"> にして、センタリングしたいブロックごとに指定する

ので回避できたりしませんか。

devise_error_messagesの中身は
<div id="error_explanation">
　<h2>#{sentence}</h2>
　<ul>#{messages}</ul>
</div>
なので、 h2やulに何も指定がなければ問題は起こらない気がするのですが……

[kumamo-n]

今おしゃっていただいたとおりに試してみたのですが、上記のとおり更にレイアウトが崩れてしまいました。custom.css.scssをみてみると
h2 {
font-size: 2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #333333;
padding:13px;
}
と指定してあるのですがこれが何か関係しているのでしょうか？

[hello-world]

申し訳ないです。
もう直接ソースをいただくくらいしか私には解決法を見つけられそうに無いです。

[kumamo-n]

https://github.com/tomohito-kumano/missmiss 　こちらがコードです。　

[hello-world]

ありがとうございます。

エラー時にラベルとインプットエリアの表示がおかしくなる現象ですね。

config/application.rb に

config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }

を追加すれば直ると思います。
どうでしょうか。

[kumamo-n]

おお、ついに直りました！！！！！　本当にありがとうございます。ずっと修正が効かなくて困っていたんですがついにできました！！