Help us understand the problem. What is going on with this article?

投稿ページのビュー画面を直す

アウトプット用です。
今回はこちら18c7038dfaec3788b2be3c423fd05bc2-2.png

投稿はできているが、何故はみ出るんだ?
インデントも問題無い

top_page>index.html.haml
.top
  %ul.top__side
    ジャンル
    %li.top__side__love
      恋愛
    %li.top__side__work
      仕事
    %li.top__side__money
      お金
    %li.top__side__friend
      友人
    %li.top__side__school
      学校
    %li.top__side__other
      その他
  .top__consultation
    .top__consultation__title
      お悩み一覧
    .top__consultation__text
    - @toppages.each do |top_page|
      = top_page.contents
      .top__consultation__text__time
        = top_page.created_at

色々試行錯誤した結果each文の後が元の定義したクラスの中に収まらないことが判明しました。
これ、何ででしょうかね??

ということでそれならとeach文を一番最初につけました

top_page>index.html.haml
- @toppages.each do |top_page|
  .top
    %ul.top__side
      ジャンル
      %li.top__side__love
        恋愛
      %li.top__side__work
        仕事
      %li.top__side__money
        お金
      %li.top__side__friend
        友人
      %li.top__side__school
        学校
      %li.top__side__other
        その他
    .top__consultation
      .top__consultation__title
        お悩み一覧
      .top__consultation__text
        = top_page.contents
        .top__consultation__text__time
          = top_page.created_at

割愛してますが、インデントを最初の"top"と合わせたらSyntaxError
エラーになったので地味に気をつけたいところ。全て1個インデントを下げる必要があります(当たり前だけど)

adb62a3f262ca3cb8d40312aba48b4f8.png

ということで解決です。
ただ何故はみ出てしまうのか原因はわかりましたが、言語化できません。
htmlのルールと言ってしまえば終わりな気はしますが。

訂正
修正したコードで複数投稿したら一番上にeach分があるためにお悩み一覧や左のカテゴリまで
全て表示されていました汗
正しくは下記ですね

top_page>index.html.haml
.top
  %ul.top__side
    ジャンル
    %li.top__side__love
      恋愛
    %li.top__side__work
      仕事
    %li.top__side__money
      お金
    %li.top__side__friend
      友人
    %li.top__side__school
      学校
    %li.top__side__other
      その他
  .top__consultation
    .top__consultation__title
      お悩み一覧
    - @toppages.each do |top_page|
      .top__consultation__text
        = top_page.contents
        .top__consultation__text__time
          = top_page.created_at

ただ要領は変わらないですね。インデント一個下げただけであっさり解決しました笑

forest0720
前職販売職 26歳 未経験から横浜の自社受託会社にエンジニア転職致しました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away