web-dev-qa-db-fra.com

Comment définir un composant de sélection d'ions avec une largeur de 100% dans IONIC 2

Je voudrais régler ma sélection d’ions avec 100% de la largeur.

J'ai essayé avec la classe css comme ceci:

.mySelect { width: 100% !important; }

Mais ça ne fonctionne pas.

ionic2
13
Luis Antonio Pestana

Je l'ai fait.

Pour quelqu'un qui veut la solution, voici le code:

.myCustomSelect{
  max-width: 100% !important;
}

Vous devez obligatoirement remplacer la propriété css 'max-width'.

29
Luis Antonio Pestana

Augmenter la spécificité du sélecteur permet de le faire sans le! Important dessus:

ion-select.myCustomSelect{
  width: 100%;
  max-width: 100%;
}

Ce qui le rend un peu plus propre, car! Important doit être utilisé avec la plus grande parcimonie possible, comme indiqué dans l'article Stack Overflow: Devrais-je éviter d'utiliser! Important dans CSS?

8
Uniphonic

Vous n'avez pas besoin de! Important du tout! Ionic a spécifié une largeur minimale de 45% (ou peu importe, selon votre version de ionic). Tout ce que vous avez à faire est de le dépasser avec une largeur maximale de 100%. En même temps, l'élément select, en tant qu'élément en ligne, ne se développera que pour s'adapter à son contenu. Donc, ça ne remplira pas toute la largeur. Donc, pour que cela se produise, vous ajoutez simplement width: 100%. Donc, votre classe CSS finale peut ressembler à ceci:

.full-width-select {
  width: 100%;
  max-width: 100%;
}
6
Devner

J'ai essayé chacune des solutions, mais j'ai trouvé le moyen idéal de le faire:) Modifiez simplement votre fichier sass en ajoutant ceci 

ion-select{
    max-width: 70% !important;// your choice :)
}
2
Kishan Oza

La réponse de Luis Antonio Pestana est bonne si vous l'associez au code de sa question initiale. Donc, pour être plus clair, le code complet pour obtenir la sélection d’ions à prendre 100% de son conteneur est:

.your_ion_select {
    max-width: 100% !important;
    width: 100% !important;
}
0
fraxool