More than 3 years have passed since last update.

非同期処理導入。レイアウトがずれる、失敗例について

Last updated at 2020-06-12Posted at 2020-06-12

※備忘録的ですが、レイアウト崩れなど遭遇した方は一度参照してみて下さい。

検索ボタンを押下し、リストを表示。
表中の番号のリンクをクリックすると、非同期で画面が描写されるのですが、画像の通り、レイアウトがずれてしまいます。

対応１）今回はソースを確認し、微修正を施します
以下で、必要な箇所のみレンダリングして再描写します。

show.js.erb

$('.main-krown-area').html("<%= escape_javascript(render 'mainknowledge' ) %>");

元々、文章を表示する部分（mainknowledge）と画像を表示する部分(mainimage)を別々にレンダリングするようにしていました。

show.html.erb

1  <!-- クラウン表示 -->
2  <%= render "mainknowledge" %>
3  <!-- クラウンイメージ表示 -->
4  <%= render "mainimage" %>

これが原因だったようで、文章の部分だけが再描写することで、レイアウトが崩れたようです。
文章の表示と画像をscssで同じクラスにまとめて、レンダリングも一つだけ再描写するようにすると、以下のようにおさまるようになりました。

以上です。