The appearance of my application is enhanced when the browser window is maximized to its full extent, causing the content to be collapsed upon minimizing the browser window.
I prefer the content not to collapse. I have utilized a div that resembles a textarea to display the message in % only.
This is how my Jsp will look:
<div style="padding-left: 16px;" id="messageLayout">
<div id="messageDisplayArea" >
</div>
</div>
My jquery functionality involves clicking the send button:
function send(){
name = $("#name").val();
message = $("#message").val();
var time = "Time";
var user = "<div id='user' class='fontStyle'>"+name+"</div>";
var msg = "<div id='msg' class='fontStyle'>"+message+"</div>";
var timeStamp = "<div id='time' class='fontStyle'>"+time+"</div>";
var row = "<div id='msgSet' >"+ user + msg + timeStamp +"</div>";
$("#messageDisplayArea").append(row);
}
This is my CSS:
#messageDisplayArea {
height: 250px;
width: 100%;
overflow: auto;
border-color: #6495ED;
white-space: normal;
border-style: solid;
border-width: 1px;
background-color: white;
}
#user {
width: 10%;
float: left;
color: red;
word-wrap: break-word;
}
#msg {
width: 79%;
color: green;
float: left;
word-wrap: break-word;
}
#time {
width: 10%;
float:left;
color: gray;
word-wrap: break-word;
padding-left: 5px;
}
#msgSet {
width: 100%;
float:left;
word-wrap: break-word;
padding-bottom: 5px;
padding-top: 5px;
}
Your valuable contributions are greatly appreciated.