Make messages list and room users list scroll-overflow

webclient/app.css

@@ -52,11 +52,16 @@ h1 {
 
 /*** Participant list ***/
 
-.usersTable {
+.usersTableWrapper {
     float: right;
     width: 120px;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.usersTable {
+    width: 100%;
     border-collapse: collapse;
-    margin-bottom: 150px;
 }
 
 .usersTable td {
@@ -105,18 +110,29 @@ h1 {
     background-color: #FFCC00;
 }
 
+/*** Room page  ***/
+
+/* Limit the height of the page content to 100% of the viewport height minus the
+   height of the header and the footer.
+   The two divs containing the messages list and the users list will then scroll-
+   overflow separetely. 
+  */
+.room .page {
+    height: calc(100vh - 198px); 
+}
 
 /*** Message table ***/
 
 .messageTableWrapper {
     width: auto;
+    height: 100%;
     margin-right: 140px;
+    overflow-y: auto;
 }
 
 .messageTable {
     width: 100%;
     border-collapse: collapse;
-    margin-bottom: 100px;
 }
         
 .messageTable td {

webclient/room/room-controller.js

@@ -33,7 +33,8 @@ angular.module('RoomController', [])
                         }
                         $scope.messages.push(chunk);
                         $timeout(function() {
-                            window.scrollTo(0, document.body.scrollHeight);
+                            var objDiv = document.getElementsByClassName("messageTableWrapper")[0];
+                            objDiv.scrollTop = objDiv.scrollHeight;
                         },0);
                     }
                     else if (chunk.room_id == $scope.room_id && chunk.type == "m.room.member") {

webclient/room/room.html

@@ -6,15 +6,17 @@
         {{ room_alias || room_id }}
     </div>
     
-    <table class="usersTable">
-        <tr ng-repeat="(name, info) in members">
-            <td class="userAvatar">
-                <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
-                <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/>
-                <div class="userName">{{ info.displayname || name }}</div>
-            </td>
-            <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'away' ? 'away' : '')" />
-    </table>
+    <div class="usersTableWrapper">
+        <table class="usersTable">
+            <tr ng-repeat="(name, info) in members">
+                <td class="userAvatar">
+                    <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
+                    <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/>
+                    <div class="userName">{{ info.displayname || name }}</div>
+                </td>
+                <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'away' ? 'away' : '')" />
+        </table>
+    </div>
     
     <div class="messageTableWrapper">
         <table class="messageTable">