How do I make my ion-input equal width with my ion-item

Question

My ion-input element has a grey line spanning the entire width of the view. I want it so the line is equal to the ion-item elements.

    <ion-content padding>
      <ion-list>
        <ion-item>
          <ion-label>
            <h1><strong>{{$route.params.excercise}}</strong> working set weight</h1>
            <p>Include bar and plates</p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
        </ion-item>
      </ion-list>
      ...

<style scoped>
ion-input {
  width: inherit; // doesn't work
}
</style>

Width too wide.

Answer 1

You can use class="ion-padding" from https://ionicframework.com/docs/layout/css-utilities and lines="inset" or lines="full" from https://ionicframework.com/docs/api/item

Option 1:

 <ion-list class="ion-padding">
      <ion-item lines="full">
        <ion-label>
          <h1><strong>Squat</strong> working set weight</h1>
          <p>Include bar and plates</p>
        </ion-label>
      </ion-item>
      <ion-item lines="full">
        <ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
      </ion-item>
</ion-list>

Option 2:

<ion-content class="ion-padding">
  <ion-list>
      <ion-item lines="inset">
        <ion-label>
          <h1><strong>Squat</strong> working set weight</h1>
          <p>Include bar and plates</p>
        </ion-label>
      </ion-item>
      <ion-item lines="inset">
        <ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
      </ion-item>
  </ion-list>
</ion-content>