Как выровнять текстовые сообщения окна чата внизу? - PullRequest
Новая
       18

Как выровнять текстовые сообщения окна чата внизу?

0 голосов
/ 10 января 2020

Я создаю окно чата - высота на 100% работает отлично, но я не могу заставить сообщения появляться внизу.

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;
  }

Снимок экрана:

enter image description here

1 Ответ

0 голосов
/ 10 января 2020

Вы можете выровнять тексты снизу, превратив .card-body в гибкий элемент с помощью display: flex, а затем установив margin-top: auto для .text-left и .text-right.

К сожалению, это приносит правый текст слева и размещает его на одной строке. Эту проблему можно решить, добавив от justify-content: space-between к .card-body и margin-bottom от 20px до .text-left.

. Это можно увидеть следующим образом: 

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

Обратите внимание, что, учитывая, что это приложение для чата (которое будет выводить сообщения последовательно), вам нужно настроить margin-bottom из каждый элемент, к которому добавляется то же значение (20px в моем примере), когда генерируется каждое новое сообщение.

...