screenshotOn my chat conversation page, the messages are overflowing in a fixed position, and messages are overflowing.
I need to display div elements one by one.The div elements are also displaying side by side. How can I correct that?
I think I did mistake in div position.
Any ideas or suggest some articles?
I have given a sample code below.
Thanks in Advance!
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style type="text/css">
.mright{
white-space: normal;
word-wrap: break-word;
text-align: justify;
text-justify: inter-word;
}
.mleft{
white-space: normal;
word-wrap: break-word;
text-align: justify;
text-justify: inter-word;
}
.pbcb{
position:fixed;
background-color: #ECF0F1;
left:0%;
right:26%;
top:10%;
bottom:10%;
overflow-y:scroll;
overflow-x:scroll;
padding:3px;
transform:rotateX(180deg);
}
.sub{
transform:rotateX(180deg);
}
</style>
<body>
<div class="pbcb">
<div class="sub">
<div style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
<button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">one</button>
</div>
<div class="pbcb">
<div style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
<button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">two</button>
</div>
<div class="pbcb">
<div style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
<button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">three</button>
</div>
<div class="pbcb">
<div style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
<button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">four</button>
</div>
<div class="pbcb">
<div style="float:right;background-color:yellow;clear:both;margin-bottom:10px;height:auto;">
<button class="btn dropdown-toggle mright" style="background-color:#FFFF00;color:black;">five</button>
</div>
</div>
</div>
</body>
</html>This is just sample code, You can make it more better...
.main{
background-color: #f5f5f5;
position: relative;
}
.top-bar{
background-color: #f4f4f4;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
height: 50px;
z-index: 99;
}
.msg-bar{
position: absolute;
top: 60px;
bottom: 10px;
right: 0px;
width: 100px;
}
.msg-bar .msg{
background-color: #512acc;
padding: 10px;
margin-bottom: 10px;
}
.msg-bar .msg:last-child{
margin-bottom: 90px;
}
.msg-bar .msg h4{
color: #fff;
}
.msg-bar .msg p{
color: #fff;
}<div class="main">
<div class="top-bar"> </div>
<div class="msg-bar">
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
<div class="msg">
<h4>Msg #1 </h4>
<p> 12-12-2012 </p>
</div>
</div>
</div>