Ionic 2 - L'entrée ionique à l'intérieur de la carte perd son contour

Question

Mon html ressemble à ce qui suit

<ion-content padding>
  <ion-card>
    <ion-card-header>
      Header
    </ion-card-header>

    <ion-card-content>
      <form (ngSubmit)='someAction()'>

        <ion-item>
          <ion-label stacked>Some Label</ion-label>
          <ion-input name="some-input" type="text" value="some-value"></ion-input>
        </ion-item>

      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

L'entrée a généralement un contour inférieur bleu, qui devient vert lorsqu'elle est remplie.

Toutefois, lorsqu'il est utilisé à l'intérieur d'une carte, le contour n'apparaît que lorsque l'on clique sur l'entrée et que l'on saisit une valeur.

Existe-t-il un moyen de faire en sorte que le contour s'affiche même s'il est placé dans une carte ?

Answer 1

Il s'agit d'un problème connu dans le système ionique https://github.com/ionic-team/ionic/issues/11640

Toutefois, vous pouvez le corriger en ajoutant ce code à votre fichier app.scss jusqu'à ce que ce problème soit résolu par l'équipe.

.card-md .item-md.item-block:not(:last-child) .item-inner {
  border-bottom: 1px solid #dedede;
}

.card-md .item-md.item-block:not(.item-input):not(.item-select):not(.item-radio):not(.item-checkbox) .item-inner {
  border: 0;
}

Answer 2

Je l'ai fait.

ion-input {
    border-bottom: 0.5px solid map-get($colors, primary);
}

Il est simple et montre toutes les entrées avec une ligne en bas comme s'il était focalisé. Ce n'est pas le résultat que j'aurais souhaité mais c'est mieux que d'afficher une entrée vide.