VK Chikkadamalla VK Chikkadamalla - 5 months ago 22
CSS Question

how to block the mesage box

We developing chat application. in that input and out text message is coming.but input and out put is coming side by side but i need one by one.like if input is single later then that line total block then out put will come short or long text it should be come text line only but i am not able to getting that and message box corners are coming different any one please help me

This is we are facing please find screen shot

enter image description here

we need like this and corners are not coming same i need input user message how it is coming we need customer message box corner like that

enter image description here



.userTextDiv {
position: relative;
background: white;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
float: right;
margin-bottom: 7px;
font-size: 12px;
text-align: right;
padding-top: 5px;
margin-right: 4px;
margin-left: 4px;
clear: right;
}

.userTextDiv::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
right: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}

.userTextDiv::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}

.userTextDiv img {
display: block;
height: auto;
max-width: 100%;
}

.userTextDiv .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}

.userTextDiv .message {
word-break: break-all;
font-size: 12px;
}

.userTextDivOp {
text-align: left;
float: left;
clear: left;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 11px;
}

.userTextDivOp::before {
left: -18px !important;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -3px;
border: 14px solid transparent;
border-top: 6px solid #999;
}

.userTextDivOp::after {
left: -6px;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: 0px;
border: 9px solid transparent;
border-top: 4px solid white;
clear: both;
}

.userTextDivOp .message {
word-break: break-all;
font-size: 12px;
}

.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}

<div class="userTextDiv">
<div class="username">user</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>

<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">click on oky button</span>
</div>

<div class="userTextDiv">
<div class="username">user</div>
<span class="message">click on oky button</span>
</div>

<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>




Answer

A simple solution for you is to set clear: both; instead of clear: right; in the CSS rules of .userTextDiv and of .userTextDivOp.

To solve the corner problem, just c/p the CSS of .userTextDiv:before and after to replace the CSS of .userTextDivOp:before and after and replace right rules by left.

Hope it helps.

 .userTextDiv {
	position: relative;
	background: white;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	float: right;
	margin-bottom: 7px;
	font-size: 12px;
	text-align: right;
	padding-top: 5px;
	margin-right: 4px;
	margin-left: 4px;
	clear: both;
}

.userTextDiv::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	right: -11px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}

.userTextDiv::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	right: -6px;
	border: 9px solid transparent;
	border-top: 8px solid white;
	clear: both;
}

.userTextDiv img {
	display: block;
	height: auto;
	max-width: 100%;
}

.userTextDiv .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}

.userTextDiv .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp {
	text-align: left;
	float: left;
	clear: left;
	position: relative;
	background: white;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	font-size: 12px;
	margin-bottom: 7px;
	margin-right: 4px;
	margin-left: 11px;
    clear: both;
}

.userTextDivOp::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	left: -11px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}


.userTextDivOp::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	left: -6px;
	border: 9px solid transparent;
	border-top: 8px solid white;
	clear: both;
}

.userTextDivOp .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}
<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>

<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">click on oky button</span>
</div>

<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">click on oky button</span>
</div>

<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>