ion-input nested within ion-item doesn't respect --padding-end

Bug Report

Ionic version: [x] 4.x

Current behavior: Creating a floating label ion-input and adding this style

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

or this one

ion-item {
    --padding-start: 0px;
    ion-input {
      --padding-end: 0px;
    }
}

will results in changing only the “start” side.

Expected behavior: Both padding should follow the padding variable setted

Steps to reproduce: Add a simple IonInput component:

<ion-item>
  <ion-label position="fixed">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

with the following CSS:

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

Other information: Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.10.2
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

System:
   NodeJS : v10.15.0
   npm    : 6.4.1
   OS     : Linux 4.18

[brandyscarney]

Thanks for the issue! Item is structured in the following way:

<ion-item>
  <slot name="start"></slot>
  <div class="item-inner">
    <div class="input-wrapper">
      <!-- default slot contains label and input -->
      <slot></slot>
    </div>
    <slot name="end"></slot>
  </div>
</ion-item>

So when you are styling --padding-start and --padding-end you are changing the padding on the host element ion-item. I believe the padding you are seeing is coming from the default padding on the .item-inner which allows us to pad the items in the end slot without losing the bottom border that stretches all of the way to the right.

What you’re looking for is the following:

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

  --inner-padding-end: 0;
}

See the CSS Custom properties for item here: https://ionicframework.com/docs/api/item#css-custom-properties

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.