I would like to get 3 input fields in line in same ion-item and under a single common floating label such as :
but instead I have this:
due to the display: flex css attribute in input-wrapper from shadow DOM of ion-item component :
I’d like to be able to change it to inline but I can’t find the way
any help around ?
FYI the code is :
<ion-item>
<ion-label position="floating">Date of birth</ion-label>
<ion-input class="day" value="{{day}}" formControlName="day" placeholder=Day"></ion-input>
<ion-input class="month" value="{{month}}" formControlName="month" placeholder=Month"></ion-input>
<ion-input class="year" value="{{year}}" formControlName="year" placeholder="Year"></ion-input>
</ion-item>
.day, .month {
display: inline-block;
width: 80px;
}
.year {
display: inline-block;
width: 170px;
}