please help me out in chatting system  

  RSS

TopicCreator
(@topiccreator)
Eminent Member Moderator
Joined: 12 months ago
Posts: 12
12/06/2018 11:08 am  

I'm creating a chat system, it worked fine on my laptop but I've missed some CSS or HTML somewhere? I've tried comparing my files & can't see anything missing.

thanks


ReplyQuote
pankaj Gupta
(@pankaj-gupta)
Active Member Moderator
Joined: 1 year ago
Posts: 6
12/06/2018 1:39 pm  

Add a clearfix div before starting every left-chat/right-chat div.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.chat-left .chat-avatar {
  float: left;
}

.chat-left .chat-body {
  margin-right: 0;
  margin-left: 30px;
}

.chat-left .chat-content {
  float: left;
  margin: 0 0 10px 20px;
  color: #555;
  background-color: #d7d7d7;
}

.chat-avatar .avatar {
  position: relative;
  display: inline-block;
  width: 40px;
  white-space: nowrap;
  border-radius: 1000px;
  vertical-align: bottom;
}

.chat-avatar .avatar img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0 none;
  border-radius: 1000px;
}

.chat-avatar .avatar {
  width: 30px;
}

.chat-avatar {
  float: right;
}

.chat-body {
  display: block;
  margin: 10px 30px 0 0;
  overflow: hidden;
}

.chat-content {
  position: relative;
  display: block;
  float: right;
  padding: 8px 15px;
  margin: 0 20px 10px 0;
  clear: both;
  color: #fff;
  background-color: #ff5722;
  border-radius: .286rem;
  max-width: 400px;
  -moz-transition: all .3s ease 0s;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  word-wrap: break-word;
}

.chat-content p {
  color: rgba(255, 255, 255, 0.82);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


class="chat chat-right ">
class="chat-body">
class="chat-content">

Hey I'd like more information regarding this property!

class="chat-time" datetime="2018-06-11 16:06:39"> 1 hour ago class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read">
</div> </div>
class="chat-content" style="margin-right:50px;">

test

class="chat-time" datetime="2018-06-11 17:24:22"> 23 minutes ago class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read">
class="clearfix">
class="chat chat-left ">
class="chat-content" style="margin-right:50px;">

hi

class="chat-time" datetime="2018-06-11 17:34:32"> 13 minutes ago
</div>
class="chat-content" style="margin-right:50px;">

hey

class="chat-time" datetime="2018-06-11 17:34:58"> 13 minutes ago
class="clearfix">
class="chat chat-right ">
class="chat-content" style="margin-right:50px;">

hey

class="chat-time" datetime="2018-06-11 17:36:13"> 12 minutes ago class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read">
</div>
class="chat-content" style="margin-right:50px;">

hi hi hi

class="chat-time" datetime="2018-06-11 17:36:22"> 11 minutes ago class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read">
class="clearfix">
class="chat chat-left ">
class="chat-content" style="margin-right:50px;">

hi hi hi hi

class="chat-time" datetime="2018-06-11 17:36:55"> 11 minutes ago
</div>
class="chat-content" style="margin-right:50px;">

lol from creator

class="chat-time" datetime="2018-06-11 17:37:55"> 10 minutes ago
class="clearfix">
class="chat chat-right ">
class="chat-content" style="margin-right:50px;">

lol from buyer

class="chat-time" datetime="2018-06-11 17:38:45"> 9 minutes ago class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read">
</div>

ReplyQuote
Share:
  
Working

Please Login or Register