J'ai un problème avec mat-dilog sur les appareils mobiles. Sur les mobiles avec une orientation paysage, les boutons d'actions de dialogue de tapis sont en dehors de l'écran, il n'est donc pas possible de fermer la boîte de dialogue.
J'ai pensé à doubler les boutons d'action en haut de la boîte de dialogue avec une classe css spéciale, mais cela nécessite un ajout manuel à chaque boîte de dialogue.
// Dialog close button for mobile devices
.dialog-close-btn {
visibility: hidden;
}
@media screen and (max-width: 799px) and (orientation: landscape) {
.dialog-close-btn {
visibility: visible;
}
}
Cela fonctionne, mais comme je l'ai dit, c'est beaucoup de code répété et un travail inutile. Peut-être que quelqu'un a fait face à ce problème et a une solution plus simple. Au fait, j'ai également remarqué qu'en mode plein écran Chrome, il n'y a pas ce problème, peut-être est-il possible d'ouvrir des boîtes de dialogue sur les appareils mobiles en mode plein écran? Serait reconnaissant pour tout conseil).
3 Réponses :
J'ai fait quelques recherches et il semble que rendre la boîte de dialogue en plein écran peut être une bonne solution ( http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html ). Je sais que cela enlève l'effet d'avoir un dialogue, mais j'ai remarqué qu'ils peuvent être délicats sur mobile si vous ne pouvez pas réduire le contenu. Vous pouvez également acheter https://github.com/angular/material2/issues/10094 < / a>
J'ai eu le même problème.
C'est une réponse un peu tardive, mais je poste cette réponse pour être utile à quelqu'un qui pourrait en avoir besoin.
Basé sur la réponse de @Derek Schmid,
let dialogConfig = new MatDialogConfig();
dialogConfig = {
width: '80vw',
maxHeight: '100vh',
};
J'utilise maintenant cet ensemble de configuration.
width, minWidht, maxWidht est votre choix.
Le but est de définir 'maxHeight' comme '100vh' et de ne pas définir la valeur de la propriété 'height'.
Cela fonctionne pour moi dans deux points.
1) Ce n'est pas un plein écran, donc je peux toujours utiliser la valeur de la boîte de dialogue (dans la plupart des cas).
2) Dans une petite taille d'écran (en hauteur, comme sur un mobile), toute la partie mat-dialog et mat-dialog-content devient défilable (pas seulement la partie mat-dialog-content).
Essayez ceci :)
La boîte de dialogue Mat s'attend à ce que le titre et les actions tiennent sur une seule ligne. Si, dans votre cas d'utilisation, le titre et / ou les actions couvrent plus de lignes, vous pouvez les mettre toutes à l'intérieur du contenu et éviter d'utiliser complètement la partie mat-dialog-title.
<div mat-dialog-content class="details">
<h1 *class="title">{{data.title}}</h1>
<div> Your content here</div>
</div>
<div mat-dialog-actions>
</div>
Réduisez la taille de la boîte de dialogue .....
J'y ai pensé, mais sur les appareils avec une diagonale inférieure à 7 ", le bloc de contenu de la boîte de dialogue serait trop petit et ce ne serait pas pratique
C'est ce que c'est. C'est un appareil mobile en mode paysage et vous essayez d'afficher une boîte de dialogue avec des boutons dans le pied de page. Nous ne pouvons pas vous dire comment faire la conception UX de votre application. Le matériau angulaire n'a pas de fonctionnalités de dialogue pour gérer spécifiquement cette taille d'écran. Vous devrez donc gérer ce cas comme bon vous semble avec une logique personnalisée.