user3872094
Reputation: 3351
How to fix a div height
I'm working on a chat control app and my issue is like this.
I enter the text, this is used to make a rest call, get the response, and add it to the chat window.
Currently my issue is like this, the chat window gets bigger and the page gets a scroll along with the chat box(div). Can someone please let me know how can I stop this increment in the entire page.
In simple terms my requirement is the chat window will have an initial height say X and the user asks a query, the response gets pitched into the chat window, the user asks another and the same thing happens, but the page shouldn't get a scroll, instead the chat window should(This is already happening in my code).
Below is my code.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Bootstrap Chat Box Example</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME CSS -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).keypress(function(e) {
if (e.which == 13) {
$("#submitmsg").click();
}
});
$(document).ready(function() {
$('#submitmsg').bind('click', function() {
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
//alert(message);
});
});
function serverResponse(message) {
$('#chatbox').append('<p>Server: ' + message + '</p>');
}
$("#submitmsg")
.click(
function() {
alert("Hi");
var inputtedText = $("#usermsg").val();
var params = {};
var controllerUrl = 'https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer';
$.ajax({
url : controllerUrl,
type : 'POST',
data : {
"question" : inputtedText
},
beforeSend : function(xhrObj) {
// Request headers
xhrObj.setRequestHeader(
"Ocp-Apim-Subscription-Key", "MyKey");
xhrObj.setRequestHeader('Content-Type',
'application/json; charset=UTF-8');
},
success : function(data) {
var dataObj = data;
alert('Data:' + JSON.stringify(dataObj));
$('#resultvalue').html(data);
serverResponse(JSON.stringify(dataObj));
alert(data);
}
});
});
</script>
</head>
<body>
<nav class="menu">
<div class="container-fluid">
<div class="navbar-header">
<div class="back">
<img src="acn.jpg" draggable="false" />
</div>
<div class="name">My Bot</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
User Name</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a></li>
</ul>
</div>
</nav>
<br />
<br />
<br />
<div class="container">
<div class="row pad-top pad-bottom">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="chat-box-new-div">
<div class="chat-box-new-head">Compliance Avatar</div>
<div class="panel-body chat-box-new">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
</div>
</div>
</div>
<div class=" col-lg-6 col-md-6 col-sm-6">
<div class="chat-box-div">
<div class="chat-box-head">
CHAT HISTORY
<div class="btn-group pull-right">
<button type="button" class="btn btn-info dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-cogs"></span> <span class="sr-only">Toggle
Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
</ul>
</div>
</div>
<div class="panel-body chat-box-main">
<div class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif"
alt="bootstrap Chat box user image" class="img-circle" /> - Bot
</div>
<hr class="hr-clas" />
<div class="chat-box-right" id="chatbox"></div>
<div class="chat-box-name-right">
<img src="smiley.jpg" alt="bootstrap Chat box user image"
class="img-circle" /> - You
</div>
</div>
<div class="chat-box-footer">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Enter Text Here..." id="usermsg"> <span
class="input-group-btn">
<button class="btn btn-info" type="button" id="submitmsg">SEND</button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="chat-box-new-div">
<div class="chat-box-new-head">Frequently Asked Questions ..
</div>
<div class="panel-body chat-box-new">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br />
</div>
</div>
</div>
</div>
<!-- USING SCRIPTS BELOW TO REDUCE THE LOAD TIME -->
<!-- CORE JQUERY SCRIPTS FILE -->
<script src="assets/js/jquery-1.11.1.js"></script>
<!-- CORE BOOTSTRAP SCRIPTS FILE -->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
My CSS:
.hr-clas {
border-top: 1px solid #A12EB3;
}
.chat-box-main {
max-height:500px;
overflow:auto;
}
.chat-box-div {
border:2px solid #A12EB3;
border-bottom:2px solid #A12EB3;
}
.chat-box-head {
padding: 10px 15px;
border-bottom: 2px solid #A12EB3;
background-color: #B25AE5;
color: #fff;
text-align: center;
}
.chat-box-left {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size:12px;
}
.chat-box-left:after {
top: 100%;
left: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-left {
margin-top: 30px;
margin-left: 60px;
text-align:left;
color:#049E64;
}
.chat-box-name-left img {
max-width:40px;
border: 2px solid #049E64;
}
.chat-box-right {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size:12px;
}
.chat-box-right:after {
top: 100%;
right: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-right {
color: #354EA0;
margin-top: 30px;
margin-right: 60px;
text-align:right;
}
.chat-box-name-right img {
max-width:40px;
border: 2px solid #354EA0;
}
.chat-box-footer {
background-color: #D8D8D8;
padding: 10px;
}
please let me know how can I fix this.
Current issue Images.
when the page is loaded
After I send Hi as input
Thanks
Upvotes: 2
Views: 6947
Answers (4)
Jignesh Hirpara
Reputation: 135
Replace your class with this as below
.chat-box-div {
border:2px solid #A12EB3;
border-bottom:2px solid #A12EB3;
max-height:400px ;
} Upvotes: 1
5NRF
Reputation: 485
Given your description above something like the below should work (Very simplified)
<div id="chatContainer">
<div style="height:400px; overflow-y:auto;">
<!-- YOUR CHAT CONTENT GOES HERE -->
</div>
<textarea id="HaveYourSay"></textarea>
<button onclick="SendChat()">Send</button>
</div>
That will allow the contents of the div to reach a height of 400px before you get the scroll bar applied to the side.
Ive not used your HTML but have kept the example above simple so that you can apply it to your own app.
Check out the JS Fiddle : https://jsfiddle.net/6nep283h/1/
Note that I have used inline styles here for simplicity - I woudln't recommend using them in your app.
Upvotes: 5
Santosh Khalse
Reputation: 12710
Try this code for your portal
.chat-box-main{
height:200px;
overflow-y:scroll;
}
Upvotes: 0