ng-bootstrap taille Modale
Quelle est la meilleure façon de régler/remplacer une largeur pour un modal?
Il semble ng-bootstrap prend actuellement en charge
taille: 'sm' | 'lg'
mais Bootstrap 4 prend en charge sm, md et lg.
Idéalement, j'aimerais que la modale d'être réactif et d'ajuster similaire à la taille des contenants. Et sur mobile avoir le plein écran.
EDIT: Bootstrap 4 _variables.scss semble avoir un $modal-md, mais il semble être inutilisé.
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
OriginalL'auteur Todd Smith | 2017-10-27
Vous devez vous connecter pour publier un commentaire.
La solution la plus propre que j'ai pu trouver est d'utiliser le windowClass propriété.
I. e.:
Puis ajoutez les lignes suivantes à votre global des styles CSS. Ceci est important car le style ne sera pas ramassé de vos composants CSS.
Vous pouvez également utiliser à la largeur relative:
max-width: calc(100vw - 500px);
OriginalL'auteur TomDK
Essayer comme ceci :
OriginalL'auteur Chandru
J'ai trouvé que c'est une bonne solution.
ng-deep de l'ombre “-piercing” descendant du combinator peut être utilisé pour forcer un style à travers le composant enfant de l'arbre dans tous les composant enfant vues. Dans ce cas modale de dialogue classe.
OriginalL'auteur DanniFilth
ajouter css suivant dans le style.fichier css.
Remarque : on peut remplacer les
.xlModal
avec n'importe quel nom.ouvrir modal avec la nouvelle création de style.
oui. sa fonctionne très bien dans mon application.
Mais ce n'est pas de travail pour moi. J'ai fait la même chose. Quel pourrait être le problème, c'est juste compte tenu de la taille:'lg'
attendez, je vais commenter plunker.
ne fonctionne pas avec NGbootstrap.
OriginalL'auteur Kapil Thakkar
En plus de djpalme et Kapil Thakkar réponses, vous devez configurer l'encapsulation du Composant à
None
comme mentionné iciOriginalL'auteur YnadW
Lorsque vous ne spécifiez pas le
size
, la valeur par défaut utiliser$modal-md
(500px).Tous les 3 des modaux sm, md et lg sont sensibles et l'affiche sur toute la largeur (avec bordures) sur mobile.
Si vous voulez vraiment une nouvelle de taille, vous pouvez utiliser un format personnalisé:
Avec un css pour cette classe:
Cela échoue pour moi lors de l'exécution de la ngp construire.
erreur sur Angulaire 5 en raison de la non comptabilisés argument:
Argument of type '{ size: "xl"; }' is not assignable to parameter of type 'NgbModalOptions'. Types of property 'size' are incompatible. Type '"xl"' is not assignable to type '"sm" | "lg"'.
OriginalL'auteur Bastien