Wie entferne ich die Polsterung um ion-item?

ich möchte entfernen padding von meinem ion-item, damit es das volle besetzen kann width der Seite.

Bitte schauen Sie in die Entwicklertools, um die zu sehen padding um das ion-item.

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
      </ion-thumbnail> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

Das ion-item hat ein padding von 16px, wenn ich das ion-item inspiziere und auch auf der class=”scroll-content” dort fand ich scss im inspektor mit

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

Wenn ich diese Polsterung entferne, kann ion-item die gesamte Breite einnehmen, indem ich diese Polsterung entferne, aber wenn ich dies in meiner scss-Datei verwende, wird die Polsterung nicht entfernt.

Für diejenigen, die ionische 4 verwenden, sollten Sie verwenden Ionische CSS-Dienstprogramme zum Auffüllen

Kurz gesagt, Sie müssen Folgendes codieren:

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Wenn Sie die Innenpolsterung entfernen möchten, verwenden Sie ion-item benutzerdefinierte CSS-Eigenschaften:

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

Sie können lösen ion-item anders polstern…

Erstens: Verwendung der Ion-no-Padding-Klasse

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Zweitens: Verwendung von CSS oder Inline-Stil

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

Bearbeiten : Als Ionic 5.X müssen wir CSS-Dienstprogramme nach Klasse anstelle von Attributen verwenden ( ionic/BREAKING.md ).

Ich musste benutzerdefinierte verwenden CSS-Eigenschaften zum ion-item

ion-item {
  --inner-padding-bottom: 0;
  --inner-padding-end: 0;
  --inner-padding-start: 0;
  --inner-padding-top: 0;
}

Geben Sie dem Ionenelement einfach keine Polsterung, es wird die Polsterung entfernt

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Verweisen Sie auf das Ionische Dokumente

Hatte auch das gleiche wahnsinnige Problem. Es stellt sich heraus, dass ion-item einige –inner-padding-Regeln hat, die außer Kraft gesetzt werden müssen, um zu verhindern, dass Padding auf seinen untergeordneten Elementen erscheint

Neben dem Hinzufügen der

class="ion-no-padding"

Ich musste auch die folgende CSS-Stilregel hinzufügen

--inner-padding-end: 0 !important;

Das letzte Element herstellen

<ion-item *virtualItem="let section" lines="none" class="ion-no-padding" style="--inner-padding-end: 0 !important;">
...

Wenn Sie es vorziehen, nicht jedem Ion-Item No-Padding hinzuzufügen und es für die gesamte App zu entfernen.

Zum ionisch v4können Sie dies zu global.scss hinzufügen:

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

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

Das Entfernen von Padding aus dem Inhalt der Seite löst das Problem

<ion-content> 
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
      </ion-thumbnail> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>