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

2408 ワード
非同期処理 scss Rails Rails テキストリンク

１）背景

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

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

２）環境

項目 内容
OS.Catalina v10.15.4
Ruby v2.5.1
Ruby On Rails v5.2.4.3

３）内容

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

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で同じクラスにまとめて、レンダリングも一つだけ再描写するようにすると、以下のようにおさまるようになりました。

以上です。