CODEWITHSUNDEEP
cssangularionic2
user2085143
user2085143

Reputation: 4232

Ionic 2 - Ion input inside card loses outline

My html looks like the following

<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>

The input would usually have a blue bottom outline, which then becomes green when filled in.

However, when used inside a card, the outline only appears when the input is clicked and value is inputted.

Is there a way of having the outline still display even if it is placed within a card?

Upvotes: 3

Views: 2979

Answers (2)

Ferdinan Darmalim
Ferdinan Darmalim

Reputation: 39

This is a known issue in ionic https://github.com/ionic-team/ionic/issues/11640

However, you can fix it by adding this code to your app.scss until this issue is fixed by the team.

.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;
}

Upvotes: 3

bertelli.deris
bertelli.deris

Reputation: 123

I did that

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

It's simple and show all inputs with line on bottom like it was focused. It's not the result that I would like but it's better than show blank input.

Upvotes: 2

Related Questions