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

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

ただいまの
回答率

87.78%

【HTML, CSS, Rails】showアクションが実行されるとなぜかレイアウトが崩れる

解決済

回答 1

投稿 編集

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

score 10

index 投稿一覧表示
show 各ユーザーの投稿一覧

indexページは正常にレイアウトが反映されるのですが、
showページに遷移するとなぜかカラム落ちが発生します。
CSSにはmargin等の設定はしていないので、Bootstrapの幅100%はこえていることはないと思います。
showアクションでの処理内容はユーザーが投稿したデータを取得してビューで詳細表示させています。

showだけ崩れるのはRails特有のものなんでしょうか?

showアクション、ビューに関係する何らかが影響していると思うのですが、原因がわかりません。

controllers/users_controller.rb

class UsersController < ApplicationController
  before_action :authenticate_user!, only: [:show]

  def index
    @user = User.find(params[:id])
    @images = @user.images
  end

  def show
      @user = User.find(params[:id])
      @images = @user.images
  end
end
config/routes

  devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }
  resources :users

get "/users/:id" => "users#show"
end
users/show.html.erb (yieldから)

    <%=current_user.id%>.<%=current_user.name%>さんの投稿履歴
    <!--show.html.erbは今回の現象と関係ないかもです。-->

**追記**
すみません。yieldで表示されてるところしか載せていませんでした。
application.html.erbを追加しました。

<!DOCTYPE html>
application.html.erb

<html>
  <head>
    <div id="headerbg">
      <!--<img src="../assets/title.jpg">-->
      <title>railsサイト</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <!--lightbox-->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <!-- Stylesheets -->
      <link rel="stylesheet" href="assets/style.css"/>
    </div>

  <!--js読み込み-->
  <%= javascript_include_tag 'application' %>
  <%= javascript_include_tag 'acc.js' %>

  </head>

  <body><div class="wrap">
    <div class="container">
     <div class="row">
      <header>
        <div class="col-xs-12 col-sm-12 col-md-12"><%= link_to root_path do%><%=image_tag "image.png"%><%end%></div>
      </header>
     </div>

    <div class="row">
        <!--content ここにshowとindex-->
        <div class="content content_post col-md-8 offset-md-1">
        <%= yield %>
        </div>

        <div class="sidebar col-md-4 d-none d-lg-block ">
          <!--ログイン-->
          <div class="side-1 sidebar msr_box03 ">
            <h3 class="ttl"><div style="font-weight: bold; font-size: 23px;">ログイン</div></h3><br>
            <div class="inside">
              <%if user_signed_in? %>
              <%=current_user.id%>.<%=current_user.name%>さん<br>
              <%= link_to "ログアウト",destroy_user_session_path, method: :delete,:style=>"color:#007BBB;" %>
              <%= link_to "マイページ","/users/#{current_user.id}" %>
              <%else%>
              <%= link_to 'Twitterでログイン', user_twitter_omniauth_authorize_path,:style=>"color:#007BBB;"  %>
              <%end%>
            </div>
          </div>

          <!--サイド-->
          <div class="side-2 sidebar msr_box03 ">
            <h3 class="ttl"><div style="font-weight: bold; font-size: 23px;">サイド</div></h3>

            <div class="inside">
              サイド
            </div>
          </div>

          <!--サイド-->
          <div class="side-3 sidebar msr_box03 ">
            <h3 class="ttl"><div style="font-weight: bold; font-size: 23px;">サイドタイトル</div></h3><br>
            <div class="inside">サイド
              <%= link_to "詳細確認", "/intro",:style=>"color:#007BBB;" %></div>
            </div>
          </div>

          <div id="footerWrap">
            <div id="footer">
              フッター
            </div><!--id="footer"-->
          </div><!--id="footerWrap"-->

        </div><!--class="row"-->
      </div><!--class="container"-->
    </body>
</html>
_flash.html.erb

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>" role="alert" style="text-align:center"><%= message %></div>
<% end %>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • maisumakun

    2020/01/22 07:36

    show.html.erbで表示されるものはこれだけなのでしょうか。

    「カラム落ちする」というのであれば、崩れるタグを表示できるコードは書いてください(現状では、HTMLタグすら出力されていません)。

    キャンセル

回答 1

check解決した方法

0

すみません。自己解決しました。
結構無理やり感がありますが、コントローラー毎にレイアウトファイル作成、指定してあげたら、うまくいきました。

controllers/users_controller.rb

#追加  layout 'レイアウトファイル名'

何故コントローラー毎にlayoutファイルを設定しないといけないのかわかりませんが。。
layoutファイルはコントローラ毎に指定してあげないといけないんでしょうか。わかる方がいらっしゃいましたら教えてほしいです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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