チャットルームCSS修正

public/css/chat.css

@@ -205,7 +205,6 @@ img {
 .received_withd_msg { width: 57%;}
 .mesgs {
   margin-top: 40px;
-  padding: 0px 15px 48px 15px;
 }
 
 .search-bar-fixed {
@@ -258,10 +257,14 @@ img {
 .msg_history {
 
   /* チャット画面スクロール範囲
-   * 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px)) */
-  height: calc(100vh - 144px);
+   * 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px) + 協業タブの高さ(67px)) */
+  height: calc(100vh - 211px);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  padding: 0px 15px;
+}
+.landscape_msg_history {
+  padding: 0px 10%;
 }
 /****************************chatlist end *************************/
 

public/index.html

@@ -258,43 +258,6 @@
           <i class="fa fa-plus my-float"></i>
         </a>
       </div>
-
-      <!-- 協業タブ -->
-      <div class="collaboration_tab fixed-bottom">
-          <ul>
-            <li>
-              <a class="collaboration_tab_btn" id="coviewShareChat">
-                  <img src="./icon/ic_collaboration_call.png" alt="">
-                  <p id="collaboration_call">Call</p>
-              </a>
-            </li>
-            <li>
-              <a class="collaboration_tab_btn" id="coviewShareDoc">
-                  <img src="./icon/ic_collaboration_document.png" alt="">
-                  <p id="collaboration_document">Document</p>
-              </a>
-            </li>
-            <li>
-              <a class="collaboration_tab_btn" id="coviewSharePhoto">
-                  <img src="./icon/ic_collaboration_photo.png" alt="">
-                  <p id="collaboration_photo">Photo</p>
-              </a>
-            </li>
-            <li>
-              <a class="collaboration_tab_btn" id="coviewShareLive">
-                  <img src="./icon/ic_collaboration_live.png" alt="">
-                  <p id="collaboration_live">Live</p>
-              </a>
-            </li>
-            <li>
-              <a class="collaboration_tab_btn" id="coviewShareBoad">
-                  <img src="./icon/ic_collaboration_boad.png" alt="">
-                  <p id="collaboration_boad">Boad</p>
-              </a>
-            </li>
-          </ul>
-      </div>
-
     </div>
 
     <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
@@ -319,7 +282,7 @@
       <div class="mesgs">
         <div class="msg_history" id="messages">
         </div>
-        <div class="type_msg fixed-bottom">
+        <div class="type_msg">
           <div class="row">
             <div class="msg_notification" id="messageNotification">
             </div>
@@ -354,6 +317,41 @@
           </div>
         </div>
       </div>
+      <!-- 協業タブ -->
+      <div class="collaboration_tab fixed-bottom">
+          <ul>
+            <li>
+              <a class="collaboration_tab_btn" id="coviewShareChat">
+                  <img src="./icon/ic_collaboration_call.png" alt="">
+                  <p id="collaboration_call">Call</p>
+              </a>
+            </li>
+            <li>
+              <a class="collaboration_tab_btn" id="coviewShareDoc">
+                  <img src="./icon/ic_collaboration_document.png" alt="">
+                  <p id="collaboration_document">Document</p>
+              </a>
+            </li>
+            <li>
+              <a class="collaboration_tab_btn" id="coviewSharePhoto">
+                  <img src="./icon/ic_collaboration_photo.png" alt="">
+                  <p id="collaboration_photo">Photo</p>
+              </a>
+            </li>
+            <li>
+              <a class="collaboration_tab_btn" id="coviewShareLive">
+                  <img src="./icon/ic_collaboration_live.png" alt="">
+                  <p id="collaboration_live">Live</p>
+              </a>
+            </li>
+            <li>
+              <a class="collaboration_tab_btn" id="coviewShareBoad">
+                  <img src="./icon/ic_collaboration_boad.png" alt="">
+                  <p id="collaboration_boad">Boad</p>
+              </a>
+            </li>
+          </ul>
+      </div>
     </div>
 
     <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">

public/js/chat-ui.js

@@ -31,7 +31,7 @@ $(window).on('resize', function() {
         $(".chat_list").addClass("col-6").removeClass("col-12");
         $(".squareBoxContent span").addClass("landscape_span");
 
-        $(".mesgs").addClass("landscape_mesgs");
+        $(".msg_history").addClass("landscape_msg_history");
     } else {
 
         $(".group_list").removeClass("col-6").addClass("col-12");
@@ -39,7 +39,7 @@ $(window).on('resize', function() {
         $(".chat_list").removeClass("col-6").addClass("col-12");
         $(".squareBoxContent span").removeClass("landscape_span");
 
-		$(".mesgs").removeClass("landscape_mesgs");
+        $(".msg_history").removeClass("landscape_msg_history");
 	}
 
 	if (CHAT_UTIL.isIOS()) {
@@ -428,9 +428,9 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
     switch(target) {
         case '#pills-chat':
             if (CHAT_UI.isLandscapeMode()) {
-                $(".mesgs").addClass("landscape_mesgs");
+                $(".msg_history").addClass("landscape_msg_history");
             } else {
-                $(".mesgs").removeClass("landscape_mesgs");
+                $(".msg_history").removeClass("landscape_msg_history");
             }
             CHAT.globalIsInvite = true;
             $('.chatRoomIcon, .titleRoomName, #backButton').show();