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

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

ただいまの
回答率

88.80%

CSSが反映されない

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,072

KK78795046

score 13

前提・実現したいこと

Ruby on railsでオンラインのチャットアプリを製作しています。
メッセージ表示部分のスクロール実装中に、CSSが反映されないという問題が発生しています。

発生している問題・エラーメッセージ

検証ツールで確認しましたが、取り消し線がなかったので、CSS自体は効いているものの、
反映がされていない状態です。

該当のソースコード

.wrapper{
  height: 100vh;
  .chat-side{
    width: 300px;
    height: 100%;
    background-color: #1a1b1d;
    float: left;
    .side-header{
      background-color: #253141;
      height: 100px;
      width: 100%;
      &__username{
        color: $mainWhiteColor;
        font-size:16px;
        font-weight:bold;
        padding-left:20px;
        padding-top:40px;
        float: left;
      }
      .fa.fa-cog{
        font-weight: 100;
        color: $mainWhiteColor;float: right;
        padding-right:20px;
        padding-top:40px;
      }
      .fa.fa-edit{
        font-weight: 100;
        color: $mainWhiteColor;float: right;
        padding-right:10px;
        padding-top:40px;
      }
    }
    .side-footer{
      padding-left:20px;
      height: 100%;
      overflow: auto;
      &__group-name{
        color: $mainWhiteColor;
        font-size: 15px;
        font-weight: bold;
        padding-top: 20px;
      }
      &__latest-message{
        color: $mainWhiteColor;
        font-size: 11px;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 20px;
      }
    }
  }
  .chat-main{
    width:calc(100vw - 300px);
    height:100vh;
    float: right;
    .main-header{
      height: 100px;
      width: 100%;
      background-color: $mainWhiteColor;
      position: relative;
      border-bottom: 2px solid #eeeeee;

      &__current-group{
        font-size:20px;
        color: #333333;
        margin-left:40px;
        padding-top:35px;
        padding-bottom: 15px;
      }
      &__group-member{
        font-size: 12px;
        color: #999999;
        margin-left:40px;
      }
      &__edit-btn{
        color: #38aef0;
        border:solid 1px #38aef0;
        position: absolute;
        top: 0;
        left: auto;
        right: 40px;
        bottom: 0;
        margin:auto;
        height:40px;
        width:80px;
        margin-top:35px;
        text-align: center;
        line-height: 40px;
      }
    }
    .main-msgs{
      height: calc(100% - 100px - 90px);
      width:100%;
      background-color: #fafafa;
      padding-left:40px;
      padding-top:40px;
      padding-bottom:90px;
      display: table;
      overflow: scroll;
      &__user-name{
        font-size: 16px;
        color: #434a54;
        display: table-cell;
      }
      &__msg-time{
        font-size: 12px;
        color: #999999;
        display: table-cell;
      }
      &__a-msg{
        font-size: 14px;
        color: #434a54;clear: both;
      }
    }
    .footer{
      position: fixed;
      bottom: 0;
      width:calc(100vw - 300px);
      .form {
        background-color: #DDDDDD;
        box-sizing: border-box;
        height: 90px;
        padding: 20px 50px 20px 40px;
        &__message {
          border: none;
          float: left;
          height: 50px;
          width: calc(100% - 150px);
        }
        &__picture {
          background-color: white;
          float: left;
          height: 50px;
          padding-right: 10px;
          &__image {
            font-size: 20px;
            line-height: 50px;
          }
          .hidden {
            display: none;
          }
        }
        &__submit {
          background-color:  #38aef0;
          border: none;
          color: white;
          float: right;
          font-size: 16px;
          height: 50px;
          margin-left: 15px;
          padding: 0 30px;
        }
      }
    }
  }
}
.wrapper
  .chat-side
    .side-header
      %p.side-header__username 
        = current_user.name
      = link_to edit_user_path(current_user) do
        %i.fa.fa-cog
      = link_to new_group_path do
        %i.fa.fa-edit
    .side-footer
      - current_user.groups.each do |group|
        = link_to group_messages_path(group) do
          .side-footer__group-name 
            = group.name
          .side-footer__latest-message 
            = group.show_last_message
  .chat-main
    .main-header
      %h2.main-header__current-group 
        = @group.name
      .main-header__group-member グループメンバー
      =link_to edit_group_path(@group) do
        .main-header__edit-btn Edit
    .main-msgs
      = render @messages
    .footer
      .form
        = form_for [@group, @message] do |f|
          = f.text_field :content, class: 'form__message', placeholder: 'type a message'
          .form__picture
            =f.label :image, class: 'form__picture__image' do
              = fa_icon 'picture-o', class: 'icon'
              = f.file_field :image, class: 'hidden'
          = f.submit 'Send', class: 'form__submit'
_message.html.haml

.main-msgs__box
  .main-msgs__user-name
    = message.user.name
  .main-msgs__msg-time 
    = message.created_at.strftime("%Y/%m/%d %H:%M")
  .main-msgs__a-msg 
    - if message.content.present?
      %p.lower-message__content
        = message.content
    = image_tag message.image.url, class: 'main-msgs__a-msg__image' if message.image.present?

試したこと

・詳細度の確認→クラスセレクタしかないので関係ない。
・hamlのインデントの影響?→確認したが問題ない。

検証ツールスクリーンショット①
検証ツールスクリーンショット②

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • KK78795046

    2019/05/21 14:10

    .main-msgsから、&__user-nameと &__msg-timeと &__a-msgがはみ出るイメージです。

    キャンセル

  • x_x

    2019/05/21 14:16

    少なくとも&__user-nameと&__msg-timeにはdisplay: table-cellが指定されていてはみ出ることはないように見えます。
    該当部分のHTMLを挙げるわけにはいかないのでしょうか?

    キャンセル

  • KK78795046

    2019/05/21 14:56

    ご返信ありがとうございます。
    該当の部分テンプレートのHTMLを追記しました。
    ご確認いただけると幸いです!

    キャンセル

回答 1

0

検証画面をスクショを掲載していただけると

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/20 19:24

    https://gyazo.com/46bfb9b0b91a128847d87ee7d703cb56
    こちらです!ただ、今気づいたのですが、子要素の高さに合ってしまい、高さが効かないのかもしれないです。。。

    キャンセル

  • 2019/05/20 19:42

    回答者さん
    「質問への追記修正依頼」に書く内容と思います

    質問者さん
    質問は編集できます。また画像はteratailの画像添付機能でご提示ください

    キャンセル

  • 2019/05/20 22:09

    ご教示いただき、ありがとうございます!編集いたしました!
    遅くなってしまい恐縮ですが、ご確認いただけますと幸いです。

    キャンセル

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

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

関連した質問

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