Прокрутите два бутстраповых кола независимо - PullRequest
Новая
       3

Прокрутите два бутстраповых кола независимо

0 голосов
/ 20 сентября 2019

У меня есть две bootstrap 4 карточки на странице, которые содержат контент разной длины.

Я хочу установить начальную высоту карточек, чтобы она доходила до нижней части страницы, и overflow-y: scroll на каждой карточке независимо.

См. Ниже мой код ( то же самое, что и у скрипки ).

В настоящее время прокрутка на одной карте вызывает прокрутку и на другой.Как я могу заставить их прокручивать самостоятельно?Ответ на аналогичный вопрос предлагает установить высоту родительского div, которую я сейчас делаю (#message-row{height: 100%}), поэтому я не вижу, что делаю неправильно.

Я также хотел бы убедиться, что нижний колонтитул справа всегда находится внизу видимой карты (т. Е. Чтобы вам не приходилось прокручивать до конца карты, чтобы увидетьэто. 

.message-card {
  font-weight: 400;
  height: 100%;
  overflow-y: scroll;
}
.inbox-card {
  font-weight: 300;
  height: 100%;
  overflow-y: scroll;
}
#message-row {
  height: 500px;
  color: #232323;
  overflow-y: scroll;
  text-align: left;
}
#message-row .card {
  border-radius: 5px;
}
#message-row input {
  width: 70%;
  color: #0e5286 !important;
}
#message-row input.form-control {
  height: unset !important;
  background: #f5f9fc;
}
#message-row .inbox-row {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 1em;
}
#message-row .inbox-row:hover {
  cursor: pointer;
  background-color: #f5f9fc;
}
.speech-bubble {
  position: relative;
  max-width: 100%;
  min-height: 40px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 0.5em;
}
.speech-bubble.them {
  background: rgba(155, 194, 214, 0.6);
}
.speech-bubble.me {
  background: rgba(156, 199, 160, 0.6);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">


<div class="container d-flex h-100 flex-column">

  <div id="message-row" class="row mb-4">
    <div class="col-lg-5 pb-md-4 pb-lg-0">
      <div class="card">
        <div class="searchBar">
          <input id="inbox-search" class="form-control mx-auto mt-2" type="text" placeholder="Search..." />
        </div>
        <div id="inbox" class="card-body">
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some content 1 </p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some more content</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some content again </p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some content asdaa</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some asdacc </p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="card message-card">
        <div id="conversation" class="card-body">
          <div class='row'>
            <div class='col-8 float-right'>
              <div class='speech-bubble me'>A message</div>
            </div>
          </div>
          <div class='row'>
            <div class='col-8 float-right'>
              <div class='speech-bubble me'>Another message</div>
            </div>
          </div>
          <div class='row'>
            <div class='col-8 float-right'>
              <div class='speech-bubble them'>A reply</div>
            </div>
          </div>
        </div>
      <div id="new-message" class="card-footer">
        <form id="reply-form" method="POST">
          <input type="hidden" name="sender" value="<abcd">
          <div class="form-info-text form-group mb-0">
            <div class="row">
              <div class="col-11">
                <textarea class="form-control autoExpand" rows="1" name="message"></textarea>
              </div>
              <div class="col-1 send-col">
                <button type="submit" disabled><i id="sendMessage" class="far fa-paper-plane"></i></button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class='container-fluid'>
<div class='row'>
<div class='col-12'>
<h1>
Some other container that expands full width...
</h1>
</div>
</div>

</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Ответы [ 2 ]

0 голосов
/ 20 сентября 2019

На самом деле, несколько часов стуча головой о стол, я понял, что решение простое: col требуется overflow-y: scroll, а не карты.Таким образом, добавление класса scroll-col к каждому столбцу устраняет проблему: 

.scroll-col{
  height: 100%;
  overflow-y: scroll;
}

( См. Скрипку )

0 голосов
/ 20 сентября 2019

Удаление высоты и переполнения из строки сообщений класса, а также уменьшение высоты в карточке сообщений и включение папки входящих сообщений класса в первую карточку 

 .inbox {
  font-weight: 300;
  height: 80%;
  overflow-y: scroll;
}


.message-card {
  font-weight: 400;
  height: 80%;
  overflow-y: scroll;
}
.inbox {
  font-weight: 300;
  height: 80%;
  overflow-y: scroll;
}
#message-row {
  color: #232323;
  text-align: left;
}
#message-row .card {
  border-radius: 5px;
}
#message-row input {
  width: 70%;
  color: #0e5286 !important;
}
#message-row input.form-control {
  height: unset !important;
  background: #f5f9fc;
}
#message-row .inbox-row {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 1em;
}
#message-row .inbox-row:hover {
  cursor: pointer;
  background-color: #f5f9fc;
}
.speech-bubble {
  position: relative;
  max-width: 100%;
  min-height: 40px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 0.5em;
}
.speech-bubble.them {
  background: rgba(155, 194, 214, 0.6);
}
.speech-bubble.me {
  background: rgba(156, 199, 160, 0.6);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">


<div class="container d-flex h-100 flex-column">

  <div id="message-row" class="row mb-4">
    <div class="col-lg-5 pb-md-4 pb-lg-0">
      <div class="card inbox">
        <div class="searchBar">
          <input id="inbox-search" class="form-control mx-auto mt-2" type="text" placeholder="Search..." />
        </div>
        <div id="inbox" class="card-body ">
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some content 1 </p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some more content</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some content again </p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some content asdaa</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some asdacc </p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
          <div class="row inbox-row">
            <div class='col-12'>
              <p>Some contention</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="card message-card">
        <div id="conversation" class="card-body">
          <div class='row'>
            <div class='col-8 float-right'>
              <div class='speech-bubble me'>A message</div>
            </div>
          </div>
          <div class='row'>
            <div class='col-8 float-right'>
              <div class='speech-bubble me'>Another message</div>
            </div>
          </div>
          <div class='row'>
            <div class='col-8 float-right'>
              <div class='speech-bubble them'>A reply</div>
            </div>
          </div>
        </div>
        <div id="new-message" class="card-footer">
          <form id="reply-form" method="POST">
            <input type="hidden" name="sender" value="<abcd">
            <div class="form-info-text form-group mb-0">
              <div class="row">
                <div class="col-11">
                  <textarea class="form-control autoExpand" rows="1" name="message"></textarea>
                </div>
                <div class="col-1 send-col">
                  <button type="submit" disabled><i id="sendMessage" class="far fa-paper-plane"></i></button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class='container-fluid'>
    <div class='row'>
      <div class='col-12'>
        <h1>
          Some other container that expands full width...
        </h1>
      </div>
    </div>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...