Discussion :

[Daïmanu]

Bonjour.

J'ai un souci avec un composant type popup (NgbModal) assez grande (sa hauteur est 3~4 fois plus grande que celle de la page) que j'affiche en cliquant sur un bouton.
Jusque là aucun souci, mais quand elle s'affiche, c'est sa partie basse qui apparaît, je dois scroller pour voir le haut du composant.

Comment je peux faire en sorte que quand le popup s'affiche, ce soit le haut du composant qui apparaisse ?

Dans le parent :

Code homecomponent.ts :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    @ViewChild('popup_help') private popup_help: HelpComponent;
    openPopup() {
        const options = { size: 'xl', centered: true };
        this.popup_help.open(options);
    }

Dans le composent Popup (HelpComponent) :

Code helpcomponent.html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<ng-template #help_popup let-modal>
<!-- mon popup géant -->
</ng-template>

Code helpcomponent.ts :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component, Injectable, TemplateRef, ViewChild } from '@angular/core'
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 
@Component({
  selector: 'porp-popup_help',
  templateUrl: './popup_help.component.html',
  styleUrls: ['./popup_help.component.scss']
})
@Injectable()
export class HelpComponent{
    @ViewChild('help_popup') private modalContent: TemplateRef<HelpComponent>;
    private modalRef: NgbModalRef;
 
    constructor(private modalService: NgbModal) {}
 
    open(options: any) {
        this.modalRef = this.modalService.open(this.modalContent, options);
        this.modalRef.result.then();
    }
}

[krakatoa]

est ce que tu peux mettre cette fonctionnalité sur stackblitz
parceque là, comme ça c'est difficile !

[Daïmanu]

Bonjour.

Effectivement, j'aurais du commencer par ça.
Voici le lien : https://stackblitz.com/edit/angular-...component.html

Cela dit, en essayant de reproduire le problème, j'ai trouvé la cause : c'est le bouton "fermer" en bas du popup qui prend le focus automatiquement, et qui force le scroll sur sa position.

Du coup, la question que je me pose est est-ce qu'il y a moyen de ne pas forcer le focus sur ce bouton ?

[dukoid]

c'est pas plus ergonomique de mettre le scroll dans la modal et mettre la hauteur du modal en rapport avec l'ecran ?

[Daïmanu]

Bonne remarque, je vais mettre la scrollbar.

Mais pour mon souci, j'ai pu m'en sortir en transformant un élément cliquable du haut de la popup en button avec autofocus. Il y a probablement une meilleure solution, mais ça fera l'affaire pour moi.

[NoSmoking]

Bonjour,

Il y a probablement une meilleure solution, mais ça fera l'affaire pour moi.

celle proposée par dukoid, une modale ne devrait pas dépasser des limites de la fenêtre, cela ce règle facilement en CSS.

[Daïmanu]

On est d'accord, mais ce n'est pas ça qui a pas résolu mon problème, puisque même en réduisant la hauteur de la popup, ça scrollait automatiquement vers son bas.