前提・実現したいこと
Ruby on railsでオンラインのチャットアプリを製作しています。
メッセージ表示部分のスクロール実装中に、CSSが反映されないという問題が発生しています。
発生している問題・エラーメッセージ
検証ツールで確認しましたが、取り消し線がなかったので、CSS自体は効いているものの、 反映がされていない状態です。
該当のソースコード
SCSS
1.wrapper{ 2 height: 100vh; 3 .chat-side{ 4 width: 300px; 5 height: 100%; 6 background-color: #1a1b1d; 7 float: left; 8 .side-header{ 9 background-color: #253141; 10 height: 100px; 11 width: 100%; 12 &__username{ 13 color: $mainWhiteColor; 14 font-size:16px; 15 font-weight:bold; 16 padding-left:20px; 17 padding-top:40px; 18 float: left; 19 } 20 .fa.fa-cog{ 21 font-weight: 100; 22 color: $mainWhiteColor;float: right; 23 padding-right:20px; 24 padding-top:40px; 25 } 26 .fa.fa-edit{ 27 font-weight: 100; 28 color: $mainWhiteColor;float: right; 29 padding-right:10px; 30 padding-top:40px; 31 } 32 } 33 .side-footer{ 34 padding-left:20px; 35 height: 100%; 36 overflow: auto; 37 &__group-name{ 38 color: $mainWhiteColor; 39 font-size: 15px; 40 font-weight: bold; 41 padding-top: 20px; 42 } 43 &__latest-message{ 44 color: $mainWhiteColor; 45 font-size: 11px; 46 font-weight: bold; 47 margin-top: 5px; 48 margin-bottom: 20px; 49 } 50 } 51 } 52 .chat-main{ 53 width:calc(100vw - 300px); 54 height:100vh; 55 float: right; 56 .main-header{ 57 height: 100px; 58 width: 100%; 59 background-color: $mainWhiteColor; 60 position: relative; 61 border-bottom: 2px solid #eeeeee; 62 63 &__current-group{ 64 font-size:20px; 65 color: #333333; 66 margin-left:40px; 67 padding-top:35px; 68 padding-bottom: 15px; 69 } 70 &__group-member{ 71 font-size: 12px; 72 color: #999999; 73 margin-left:40px; 74 } 75 &__edit-btn{ 76 color: #38aef0; 77 border:solid 1px #38aef0; 78 position: absolute; 79 top: 0; 80 left: auto; 81 right: 40px; 82 bottom: 0; 83 margin:auto; 84 height:40px; 85 width:80px; 86 margin-top:35px; 87 text-align: center; 88 line-height: 40px; 89 } 90 } 91 .main-msgs{ 92 height: calc(100% - 100px - 90px); 93 width:100%; 94 background-color: #fafafa; 95 padding-left:40px; 96 padding-top:40px; 97 padding-bottom:90px; 98 display: table; 99 overflow: scroll; 100 &__user-name{ 101 font-size: 16px; 102 color: #434a54; 103 display: table-cell; 104 } 105 &__msg-time{ 106 font-size: 12px; 107 color: #999999; 108 display: table-cell; 109 } 110 &__a-msg{ 111 font-size: 14px; 112 color: #434a54;clear: both; 113 } 114 } 115 .footer{ 116 position: fixed; 117 bottom: 0; 118 width:calc(100vw - 300px); 119 .form { 120 background-color: #DDDDDD; 121 box-sizing: border-box; 122 height: 90px; 123 padding: 20px 50px 20px 40px; 124 &__message { 125 border: none; 126 float: left; 127 height: 50px; 128 width: calc(100% - 150px); 129 } 130 &__picture { 131 background-color: white; 132 float: left; 133 height: 50px; 134 padding-right: 10px; 135 &__image { 136 font-size: 20px; 137 line-height: 50px; 138 } 139 .hidden { 140 display: none; 141 } 142 } 143 &__submit { 144 background-color: #38aef0; 145 border: none; 146 color: white; 147 float: right; 148 font-size: 16px; 149 height: 50px; 150 margin-left: 15px; 151 padding: 0 30px; 152 } 153 } 154 } 155 } 156} 157
haml
1.wrapper 2 .chat-side 3 .side-header 4 %p.side-header__username 5 = current_user.name 6 = link_to edit_user_path(current_user) do 7 %i.fa.fa-cog 8 = link_to new_group_path do 9 %i.fa.fa-edit 10 .side-footer 11 - current_user.groups.each do |group| 12 = link_to group_messages_path(group) do 13 .side-footer__group-name 14 = group.name 15 .side-footer__latest-message 16 = group.show_last_message 17 .chat-main 18 .main-header 19 %h2.main-header__current-group 20 = @group.name 21 .main-header__group-member グループメンバー 22 =link_to edit_group_path(@group) do 23 .main-header__edit-btn Edit 24 .main-msgs 25 = render @messages 26 .footer 27 .form 28 = form_for [@group, @message] do |f| 29 = f.text_field :content, class: 'form__message', placeholder: 'type a message' 30 .form__picture 31 =f.label :image, class: 'form__picture__image' do 32 = fa_icon 'picture-o', class: 'icon' 33 = f.file_field :image, class: 'hidden' 34 = f.submit 'Send', class: 'form__submit' 35
messagehtmlhaml
試したこと
・詳細度の確認→クラスセレクタしかないので関係ない。
・hamlのインデントの影響?→確認したが問題ない。