Ионные 2 - Ion вход внутри карты теряет очертить

Question

Мой HTML выглядит следующим образом

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

вход, как правило, имеют синий контур дна, который затем становится зеленым, когда заполнены

Однако, когда. используемый внутри карты, контур появляется только при нажатии кнопки ввода и ввода значения.

Есть ли способ отображения контуров, даже если он помещен внутри карты?

Answer 1

Я сделал это

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

Это просто и показать все входы с линией на дно, как это было сосредоточенным. Это не результат, который мне бы хотелось, но это лучше, чем показать пустой ввод.

Answer 2

Это известная проблема в ионном https://github.com/ionic-team/ionic/issues/11640

Однако, вы можете это исправить, добавив этот код на свой app.scss, пока эта проблема не будет устранена с помощью команды.

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