As I work on developing a chat site, I've come across a peculiar issue with the chat display feature. Currently, my jQuery code dynamically adds chat rows to a div. My goal is to set the height of this div to 100% so that it adjusts based on the user's preferences. However, when I implement this, instead of enabling scrolling, the div expands beyond its bounds.
Despite thorough research and multiple attempts, including setting overflow-y: scroll in the CSS and applying a max-height of 100%, I have not been able to resolve the issue. Interestingly, this problem appears in Firefox 31.0 and IE 11 but does not manifest in Chrome.
Below is an excerpt of the HTML code relevant to the issue:
<html height="100%">
<link rel="stylesheet" href="./stylesheets/style.css"> <!-- Background colors, etc -->
<link rel="stylesheet" href="./stylesheets/chat.css"> <!-- Chat page styling -->
<link rel="stylesheet" href="./stylesheets/buttons.css"> <!-- Customized buttons -->
<script src="./javascripts/jquery/jquery-1.7.2.min.js"></script>
<script src="./javascripts/chat.js"></script> <!-- Script for chatting functionality -->
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<script src="./dist/js/bootstrap.min.js"></script>
<body style="background-color: #ccc;" height="100%" width="100%">
<div id="pageHeader" width="100%" height="20%">
...
</div>
<table width="100%" height="70%" style="margin: 0px">
<tr width="100%" height="70%">
<td width="60%" height="100%">
<div id="msgWindow" class="shadow"></div> <!-- Problematic div element -->
</td>
<td width="25%" height="100%">
<div id="roomWindow" class="shadow" height="100%"></div>
</td>
<td width="15%" height="100%">
...
</td>
</tr>
<tr height="15%">
...
</tr>
</table>
<table height="10%" width="100%">
<tr height="95%" width="100%">
...
</tr>
<tr height="5%" width="100%">
<td><p style="color:grey">BETA 1.0</p></td>
</tr>
</table>
</body>
</html>
The chat.css stylesheet includes rules for the problematic elements:
#msgWindow {
position: relative;
background-color: #fff;
display: inline-block;
white-space: pre;
overflow-y: scroll;
width: 100%;
max-width: 100%;
height: auto;
max-height: 100%;
}
h1{
color: #3366BB;
}
#roomWindow {
background-color: #fff;
white-space: pre;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
height: 100%;
}
.shadow {
box-shadow: 2px 2px 4px 1px #000000;
padding-top: 10px;
padding-right: 1px;
padding-bottom: 10px;
padding-left: 15px;
}
.allMsg {
max-width: 550px !important;
white-space: pre-wrap;
}
.userSpan {
font-size: 9pt;
background-color: #FFFFCC;
width: 100px;
max-width: 100px;
min-widht: 100px;
}
This is the JavaScript code used to add chat rows dynamically:
var html = "<tr><td class='userSpan'>" + msg.source + "</td><td class='allMsg'>" + msg.message + "</td>";
$('#msgWindow').append(html);
The style.css file focuses solely on colors and fonts and contains no layout specifications. Despite extensive efforts to troubleshoot this issue, I seem to be missing a simple solution.
Thanks for any help you can provide!