Вертикальная прокрутка не работает внутри наложения тегов ul в приложении Angular - PullRequest
Новая
       15

Вертикальная прокрутка не работает внутри наложения тегов ul в приложении Angular

0 голосов
/ 02 июня 2018

Я пытаюсь прокрутить список элементов, но прокрутка работает только для некоторых элементов, но не для всех.После определенного элемента прокрутка останавливается и не переходит к последнему элементу.

Вот ссылка Stackblitz .https://angular -cym8q4.stackblitz.io /

Это для наложения списка чата, который содержит список профилей.См. Следующий снимок экрана: Chatlist screenshot

На приведенном выше снимке экрана я не могу прокрутить все профили.Прокрутка, если это происходит только для некоторых профилей, не идет до самого конца списка.

Вот мой код:

app.component.html 

<div class="container-fluid">
    <div class="row">
        <div class="col-3 d-none d-lg-block col-offset-5 red coloverlay bg-custom">
            <app-chatlist></app-chatlist>
        </div>
    </div>
</div>

app.component.css 

.coloverlay {
  background-color: rgba(233, 33, 33, 0.4);
  margin: 0;
  padding: 0;
  position: fixed;
  top: 150px;
  z-index: 1;
  bottom: 0;
  right: 0;
  margin: 0;
}

.bg-custom {
  background: #2c3e50;
}

chatlist.component.html 

<div class="container-fluid p-0">
    <div class="row m-0 ">
        <div class="col p-0">

            <div class="d-flex flex-row chatlistbox ">
                <div class="m-2">
                    Chat
                </div>

                <div class="ml-auto mt-1 pr-2">
                    <i class="fa fa-window-minimize " aria-hidden="true"></i>
                </div>
                <div class="m-2">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                </div>
            </div>

            <div class="customList">
                <ul class="list-group  overflow-auto" id="contact-list">
                    <app-chatlist-item class="list-group-item p-0 border-0" *ngFor="let el of elList" [element]="el">
                    </app-chatlist-item>
                </ul>
            </div>
        </div>
    </div>
</div>

chatlist.component.css 

.overflow-auto {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.customList {
  height: 93%;
}

.chatlistbox {
  background: aquamarine;
  height: 2%;
}

chatlist-item.component.html 

<div class="d-flex flex-row bg-custom item">
    <div class="p-2">
        <img src="{{element.imagePath}}" alt="" />
    </div>
    <div class="p-2">
        <div class="d-flex flex-column flex-wrap name">
            <h6 class="m-0">
                {{element.firstName}} {{element.lastName}}
            </h6>
            <span class="details">
                {{element.details}}
            </span>
        </div>
    </div>

</div>

chatlist-item.component.css 

img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  padding: 3px;
  float: left;
  cursor: pointer;
}

.bg-custom {
  background: #2c3e50;
}

* {
  color: #e3dcdc;
}

.item:hover {
  background: #32465a;
}

Я не уверен, в чем проблема.Любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 02 июня 2018

Проблема в том, что контейнер выше страницы, поэтому полоса прокрутки уходит со страницы.

Чтобы исправить это, вам нужно установить высоту для некоторых элементов, например, так: 

.container-fluid.p-0,
.row.m-0,
.col.p-0 {
  height: 100%;
}

Наконец, вам нужно изменить высоту customList.Я бы рекомендовал использовать calc вместо фиксированного процента, что может быть не тем, что вы хотите. 

.customList {
  height: calc(100% - 15px);
}

Вот ответвление стекаблица с фиксированным CSS:

https://stackblitz.com/edit/angular-7c7dmk?file=src/app/chatlist/chatlist.component.css

...