#解決したいこと
全ページ共通で表示している部分テンプレートを特定のページのみ非表示にしたい。
本件に当てはめると、チャットページに移行するため常に画面右下部に表示させているアイコンをチャットページでは意味を持たないため非表示にしたい
※下記よりイメージ
画像右下部にあるアイコン(チャットページへのリンク)は、部分テンプレートを使用し全ページで表示をさせている。
アイコンクリック後に移行するチャットページでアイコンは意味を持たないので、表示をさせたくない
###現在のコード
application.html.erb
erb
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Chat</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 10 </head> 11 12 <body> 13 <div class="wrapper"> 14 <%= render 'layouts/header' %> 15 <%= yield %> 16 <%= render 'layouts/chat_icon' %> 17 <%= render 'layouts/footer' %> 18 </div> 19 <%= render 'layouts/script' %> 20 </body> 21</html>
チャットページ
erb
1<div class="index"> 2 <% @messages.each do |message| %> 3 <div> 4 <%= message.content %> 5 </div> 6 <% end %> 7</div> 8 9<div> 10 <%= form_with(model: @message, local: true) do |f| %> 11 <%= f.text_field :content, class: 'form-control' %> 12 <%= f.submit '投稿', class: "btn btn-primary" %> 13 <% end %> 14</div> 15 16<script> 17 //ページ移行後最下部までスクロールする 18 function scrollBottom(){ 19 var a = document.documentElement; 20 var y = a.scrollHeight - a.clientHeight; 21 window.scroll(0, y); 22 } 23 scrollBottom(); 24</script>
cssを使用し非表示にできないものかと取り組んでみたのですが、うまく実装できませんでした。
本件を解決するすべをご教示頂けますと幸いです。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー