diff --git a/webclient/app.css b/webclient/app.css index 6a9ea25b33..fd548c117b 100644 --- a/webclient/app.css +++ b/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 { diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index f3836c536b..e54751ef6d 100644 --- a/webclient/room/room-controller.js +++ b/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") { diff --git a/webclient/room/room.html b/webclient/room/room.html index 3439f1a786..276c3caa5a 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -6,15 +6,17 @@ {{ room_alias || room_id }} - - - -
- - -
{{ info.displayname || name }}
-
-
+
+ + + +
+ + +
{{ info.displayname || name }}
+
+
+