Accédez à cet article de la boîte de dialogue
Voir cette image ci-dessous lorsque j'ouvre la boîte de dialogue
Mais le problème est que l'en-tête de la grille sera masqué lors de la réduction du navigateur
J'utilise la boîte de dialogue partout dans mon application. Mon projet va vivre ce week-end. Mais je devrais résoudre ça avant d'aller vivre. Pourriez-vous s'il vous plaît quelqu'un réparer cela?
5 Réponses :
Essayez ce css
.ui-dynamicdialog { height: 100%; overflow: auto; z-index: 100000; transform: translateX(-50%) translateY(-50%); opacity: 1; margin: 30px 0; }
Ajustez le CSS selon vos besoins. Calculez le haut et définissez-le ici
Qu'entendez-vous par ui-dynamicdialog
? où dois-je ajouter?
Inspectez un échantillon de primeng sur son site Web. Il s'agit d'une boîte de dialogue primeng ajoutée à la classe par défaut
Essayez ceci
body .ui-dialog { z-index: 9999;}
Vous devez remplacer .ui-dialog {z-index: 1001;}
inline z-index
en utilisant ! important
comme indiqué ci-dessous :
.ui-dialog { z-index: 9999!important; }
Ceci est dû au fait que l'id # layout-topbar
z-index est plus grand que ui-dialog
, vous devez donc remplacer ui-dialog z-index
en utilisant ! important
. j'espère que cela vous aidera.
Utilisez la propriété baseZIndex
pour DynamicDialog
et définissez sa valeur au-delà de la valeur # layout-topbar
qui est 9998
const ref = this.dialogService.open(CarsListDemo, { header: 'Choose a Car', width: '70%', baseZIndex: 9999 //Base zIndex value to use in layering });
Le redimensionnement de la fenêtre du navigateur ne donnera pas des résultats optimaux pour une vue réactive. J'ai vérifié votre page et votre css. Tout a l'air bien et il n'y a pas de problème.
Mais, lorsque vous redimensionnez le navigateur, la fenêtre contextuelle apparaît comme si l'en-tête de la grille était masqué sous l'en-tête de la page. La raison derrière cela est que la fenêtre contextuelle de la grille est en position fixe, elle calculera donc la hauteur totale de la fenêtre du navigateur et apparaîtra au centre de celle-ci.
Essayez de l'afficher en utilisant Activer / désactiver la barre d'outils de l'appareil (Ctrl + Maj + M) et votre fenêtre contextuelle regarde exactement au centre verticalement et horizontalement. Image ci-dessous pour votre référence.