Активная страница нумерации страниц Laravel отображается без стиля - PullRequest
Новая
       22

Активная страница нумерации страниц Laravel отображается без стиля

0 голосов
/ 06 сентября 2018

Я использую пагинацию Laravel с помощью метода -> render () или -> links () . Все в порядке, единственная проблема с моей текущей активной страницей, не имеет значения, является ли первая, вторая или последняя страница, если это активная страница, стиль не работает должным образом. Вот пример моей проблемы.

Problem

В поисках решения моей проблемы я вижу, что к выбранному номеру страницы добавлен «активный» класс. Поиск в моих css-файлах (из бесплатного шаблона coreui)

Я нашел следующие стили: 

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
    color: #fff;
    background-color: #20a8d8;
    border-color: #20a8d8; 
}

Вот вывод HTML моей функции render(): 

<ul class="pagination">
    <li><a href="http://localhost:8000/productos?page=1" rel="prev">&laquo;</a></li>
    <li><a href="http://localhost:8000/productos?page=1">1</a></li>
    <li class="active"><span>2</span></li>
    <li><a href="http://localhost:8000/productos?page=3">3</a></li>
    <li><a href="http://localhost:8000/productos?page=3" rel="next">&raquo;</a></li>
</ul>

В чем может быть проблема?

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

У меня тоже была такая же проблема. Но я добавил свой собственный CSS для стилизации тегов привязки с моими собственными стилями. Оказывается, мой CSS мешал этому, поэтому я прокомментировал все стили тегов привязки, и это сработало! Итак, (в моем случае) решения в том, что не используйте имя тега для написания каких-либо стилей в вашем CSS, скорее используйте идентификаторы или классы для этой цели. Чтобы нацелить нужные теги привязки в navbar, сейчас я делаю это: 

#mynav a {
   color: white;
   text-decoration: none;
   font-size: 1.3rem;
   font-weight: bold;
}

Таким образом, он не мешает другим тегам привязки на странице.

0 голосов
/ 06 сентября 2018

Играя с моим CSS-файлом и используя комментарии @fubar, я нашел решение. То, что я делаю, было так:

Я изменяю это: 

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
   color: #fff;
   background-color: #20a8d8;
   border-color: #20a8d8; 
}

К этому: 

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
**.pagination li.active span,** --Added line
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
   color: #fff;
   background-color: #20a8d8;
   border-color: #20a8d8; 
}

И я добавил этот стиль: 

.page-link, .pagination-datatables li a, .pagination li a, .pagination span {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #20a8d8;
    background-color: #fff;
    border: 1px solid #ddd; }
...