web-dev-qa-db-fra.com

Comment enlever le rembourrage autour de l'élément ionique?

Je souhaite supprimer padding de mon élément ionique afin qu'il puisse occuper l'intégralité de width de la page.

Veuillez regarder dans les outils de développement pour voir le padding autour de l'élément ionique.

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="...">
      </ion-thumbnail> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

L'ion-item a un rembourrage de 16px, quand j'inspecte l'ion-item et aussi sur le class = "scroll-content" là j'ai trouvé scss dans l'inspecteur avec

ion-app.md [padding] .scroll-content {
    padding: 16px;
}

Si je supprime ce rembourrage, l'élément ionique peut occuper toute la largeur en supprimant ce rembourrage, mais lorsque j'utilise ceci dans mon fichier scss, le rembourrage n'est pas supprimé.

htmlcssionic-frameworkionic2ionic3
7
Aditya

Vous pouvez résoudre ion-item rembourrage de manière différente ...

Premièrement: Utilisation de la classe ion-no-padding 

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Deuxièmement: Utilisation du style CSS ou en ligne 

<ion-item style="padding:0px !important;">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Edit : Comme Ionic 5.X nous devons utiliser les utilitaires CSS par classe au lieu d'attributs ( ionic /BREAKING.md ).

16
Utpaul

Pour ceux qui utilisent ionic 4, vous devez utiliser Ionic CSS Utilties for padding

En bref, vous devez coder ceci:

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Si vous souhaitez supprimer le rembourrage intérieur, utilisez ion-item propriétés CSS personnalisées :

ion-item {
  --padding-end: 0px;
  --inner-padding-end: 0px;
  // here other custom CSS from documentation
}
16
massi

donnez simplement aucun rembourrage à l'élément ionique, il enlèvera le rembourrage

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Reportez-vous à ionic docs

5
Abinesh Joyel

Si vous préférez ne pas ajouter de rembourrage à chaque élément ionique et le supprimer pour l'ensemble de l'application.

Pour ionic v4 , vous pouvez l'ajouter à global.scss:

ion-item {
    --padding-start: 0;
}

Source: https://ionicframework.com/docs/api/item#css-custom-properties

1
Dylan w