Modifier le composant ngx-bootstrap/pagination

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous.

J'essaye désespérément de modifier le composant pagination de bootstrap, sans succès.

Je voudrai que le focus ne soit plus bleu, mais orange, et ça ne fonctionne pas.

Est-ce que quelqu'un peux m'aider, svp ?

Code:

1
2
3
4
5
6
7
8
9
10
...
      <div class="d-flex paging" >
        <span tabindex="0" class="btn-orange-fli">
        <pagination class="my-pagination" [totalItems]="nbFlights" [(ngModel)]="currentPage" [itemsPerPage]="pageSize" [maxSize]="4"
          [rotate]="false" [boundaryLinks]="true" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;"
          lastText="&raquo;">
        </pagination>
      </span>
      </div>
...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
...
.paging {
  justify-content: center;
  font-size: 0.8rem;
  height: 30px;
}
 
.my-pagination::ng-deep .page-item.active .page-link {
  outline-color: orange;
  outline-style: solid;
  outline-width: 1px;
}
...

Pièce jointe 640525

23/06/2023, 13h34
Pytet

Bonjour,

Quel est la version de Bootstrap utilisé ?

Sauf erreur, avec version 5, la bordure appliquée sur les liens de pagination est définie avec un box-shadow : https://jsfiddle.net/epd1vmqc/
23/06/2023, 15h13
Zebulon777

1 pièce(s) jointe(s)

Je trouve plusieurs choses dans l'appli Angular :

"bootstrap": "^4.3.1",
"ngx-bootstrap": "^6.1.0",

Merci de prendre le temps de m'aider.

Je viens d'essayer ta solution, ça fonctionne, mais ça ne fait pas ce que je veux : il faut que ça remplace le focus bleu qui passe de case en case, car on ne le voit pas assez sur le fond qui a été choisi.

Pièce jointe 640531
23/06/2023, 16h19
Zebulon777
J'ai trouvé !
Voici la solution, si ça peut servir à quelqu'un. ;)

Il faut aller en profondeur... huhu
Code:

1 2 3 4 5 ::ng-deep .page-link:focus { outline-color: orange !important; outline-style: solid; outline-width: 3px; }