Align Text with Bottom as It Comes in During a Chat

Align text with bottom as it comes in during a chat?

The scroll-bars don't kick in because chatmessages just keeps getting taller.

Use these styles:

    #chatbox
    {
        overflow:   none;
        position:   relative;
        width:      100%;
        height:     400px;
    }
    #chatmessages
    {
        overflow:   auto;
        position:   absolute;
        bottom:     0;
        max-height: 400px;
    }

How to align text messages of a chat window to the bottom?

You can align your texts to the bottom by turning .card-body into a flex element with display: flex, and then setting margin-top: auto on both .text-left and .text-right.

Unfortunately this brings the right-hand text to the left, and places it on the same line. This can be resolved by adding justify-content: space-between to .card-body, and a margin-bottom of about 20px to .text-left.

This can be seen in the following:

.d-flex {  height: 100vh; /* Changed purely for Stack example */}
.card {  height: 100%;}
.card-body {  overflow-y: auto;}
.badge {  font-weight: 400;}
/* NEW */.card-body {  display: flex;  justify-content: space-between;}.text-left, .text-right {  margin-top: auto;}.text-left {  margin-bottom: 20px;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="d-flex justify-content-center">  <div class="container container-child">    <div class="card">      <div class="card-body">        <div class="text-left"><span class="badge badge-pill badge-secondary" title="2020-01-01 09:00:00">Hello</span></div>        <div class="text-right"><span class="badge badge-pill badge-primary" title="2020-01-01 09:00:00">World</span></div>      </div>      <div class="card-footer">        <div class="input-group input-group-sm">          <input type="text" class="form-control" placeholder="Your message..." autofocus />          <div class="input-group-append">            <button type="button" class="btn btn-primary"><i class="fa fa-paper-plane-o fa-fw"></i><span class="d-none d-sm-inline"> Send</span></button>          </div>        </div>      </div>    </div>  </div></div>

CSS align chat boxes to bottom of screen

• Use pointer-events: none on the container; elements underneath it will now be clickable.

• Arrange the chat boxes inside the fixed container with display: inline-block and vertical-align: bottom.

• The chat boxes get pointer-events: auto so they and their children can be clicked.

For IE10 and below, check out this answer to an older question to transfer click events.

Example

See it full screen and select the text input sitting underneath the invisible container.

.under {
  position: absolute;
  bottom: 200px;
  right: 200px;
}
#container {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.chat {
  border: 1px solid #999;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  margin: 0 5px;
  pointer-events: auto;
}
.title {
  padding: 0.5em;
  background-color: blue;
  color: white;
}
.text {
  padding: 10px;
}

<div class="under">
  <input type="text" value="select me!" />
</div>

<div id="container">
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text" style="height:250px">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
</div>

flutter: how to align time on the bottom right side of chat message

Wrap your timeSent.toDate padding widget into a row, and give that a mainaxisAlignment of end, like this:

     Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 1.0),
            child: Text(
              timeSent.toDate(),
              style: TextStyle(fontSize: 10, color: Colors.white),
            ),
          ),
        ],
      ),

This will solve your problem.

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

Align text to the bottom of a div

Flex Solution

It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.

.wrap {  height: 200px;  width: 200px;  border: 1px solid #aaa;  margin: 10px;  display: flex;}
.wrap span {  align-self: flex-end;}

<div class="wrap">  <span>Align me to the bottom</span></div>

Can't align chat input to bottom of div in CSS

From what I understood is you have to give a position fixed to your message-box.

Check this solution Make div stay at bottom

How to align text to the bottom right of my footer?

You can add position: relative to the parent (.footer-section) and use absolute positioning to align .creator-container to bottom right.

.footer-section {
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
  position: relative;
}

.copyright {
  text-align: center;
}

.creator-container{
  position: absolute;
  bottom: 0px;
  right: 5px;
}

<section class="footer-section">

  <div class="copyright">
    <p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
  </div>

  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>

</section>

Can't align latest messages to the bottom

jQuery aided solution

Using your HTML mark-up:

<div class='inner-conversation-container'>
    <div class='conversation-stream-container'>
        <!-- A single item -->
        <div class='conversation-item'>
            <!-- Message parts -->
            <div class='conversation-message-part' msg-id='125'>
                <div class='center-part'>test 9</div>
            </div>

            ...

            <div class='conversation-message-part' msg-id='143'>
                <div class='center-part'>no, it's not</div>
            </div>
            <div class='conversation-message-part' msg-id='144'>
                <div class='center-part'>latest needs to be in the bottom</div>
            </div>
        </div>
    </div>
</div>

you can simplify your CSS as follows:

.inner-conversation-container {
    height: 200px;
    width: 500px;
    border: 2px solid lightgray; /* for demo only */
    overflow: auto;
}
.conversation-stream-container {
    background-color: yellow; /* for demo only */
}

and set the scroll bar position using jQuery:

$('.inner-conversation-container').scrollTop(
   $('.inner-conversation-container')[0].scrollHeight
);

Demo fiddle: http://jsfiddle.net/audetwebdesign/FW6Y5/

---

Related Topics