@iluxa1810

Как сделать так, что бы пагинация не съезжала вверх если в таблице не хватает элементов?

В общей, есть таблица, в внизу страницы.
Так вот, все работает четко до тех пор, пока в таблице находится ровно столько элементов сколько я и ожидаю(например 10).

Однако, на какой-нибудь последней таблице может быть элементов меньше и => моя пагинация вылетает наверх.

Fixed исправляет эту ситуацию, но тогда у меня пагинация накладывается поверх таблицы если кто-то ресайзит окно...

Подскажите, как я могу выйти из данной ситуации?

<div>
  <table class="table table-dark table-hover">
    <thead class="thead-dark">
      <tr class="d-flex">
        <th class="col-4" scope="col">Название сборки</th>
        <th class="col-3" scope="col">Тип сборки</th>
        <th class="col-2" scope="col">Автор сборки</th>
        <th class="col-3" scope="col">
          <div class="btn-toolbar mb-3 justify-content-center">
            <a class="btn btn-warning btn-sm mr-1" [routerLink]='["add"]' *ngIf="permissionService.canUpload()"
              role="button">Добавить сборку</a>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let entity of paginator?.currentPageItems">
        <tr class="d-flex">
          <td class="col-4">
            {{entity?.name}}
          </td>
          <td class="col-3">
            {{entity?.type.name}}
          </td>
          <td class="col-2">
            {{entity?.owner.login}}
          </td>
          <td class="col-3">
            <div class="btn-toolbar mb-3 justify-content-center" *ngIf="entity.id>0">
              <button class="btn btn-primary btn-sm mr-1" (click)="onDownloadClick(entity)">Скачать</button>
              <button class="btn btn-primary btn-sm mr-1" [routerLink]="['browser', entity.id]">Подробнее</button>
              <button class="btn btn-primary btn-sm mr-1" (click)="onDescriptionClick(entity)">Описание</button>
            </div>
          </td>
        </tr>
        <tr class="d-flex" id='description' *ngIf="visibleDict.getValue(entity.id)==true">
          <td class="col-12" colspan='4'>{{entity.description}}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

<div class="row align-items-center justify-content-center pb-3">
  <nav>
    <ul class="pagination">
      <li class="page-item" [ngClass]="{disabled:!paginator?.canMovePrev}"><a class="page-link"
          (click)="paginator.goToPrevPage().subscribe()">Previous</a></li>
      <li *ngFor="let page of pageArray" [ngClass]="{active:paginator.currentPageNumber==page}" class="page-item"><a
          class="page-link" (click)="paginator.goToPage(page).subscribe()">{{page}}</a></li>
      <li class="page-item" [ngClass]="{disabled:!paginator?.canMoveNext}"><a class="page-link"
          (click)="paginator.goToNextPage().subscribe()">Next</a></li>
    </ul>
  </nav>
</div>


JsFiddle . Ну и соответственно, если убрать N строчек, то пагинаций уедет наверх, чего я не хочу...
  • Вопрос задан
  • 153 просмотра
Решения вопроса 1
@noeer
Оберните таблицу в блок div, и задайте ему min-height
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
move2usajobs.com LLC Лос-Анджелес
от 2 000 до 4 000 $
07 окт. 2024, в 16:30
1000 руб./за проект
07 окт. 2024, в 16:19
2000 руб./за проект
07 окт. 2024, в 16:14
500 руб./за проект