CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
user12481721
user12481721

Reputation:

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

I'm building a chat window - the height 100% works perfectly, but I can't make the messages appear on the bottom.

HTML:

<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:

  .d-flex {
    height: 100%;
  }

  .card {
    height: 100%;
  }

  .card-body {
    overflow-y: auto;
  }

  .badge {
    font-weight: 400;
  }

Screenshot:

enter image description here

Upvotes: 1

Views: 2298

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Note that given this seems to be a chat application (that would write the messages out sequentially), you'll want to adjust the margin-bottom of each element to have the same value (of 20px in my example) added to it as each new message is generated.

Upvotes: 3

Related Questions