Good morning dear, sorry English, but I’m Brazilian and I needed to translate this post.
I’ve been trying to figure it out for a few days. I understood that it is related to the CSS 4 component and variables, but I couldn’t get the result I was looking for.
I have the following code:
<ion-row class="linha-40px">
<ion-col size="6" class="item-40px">
<ion-item class="ion-no-padding item-40px" color="secondary" line="none">
<ion-label class="ion-no-padding" position="floating">Cidade</ion-label>
<ion-input class="ion-no-padding" type="text" [(ngModel)]="cidade"></ion-input>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-item class="ion-no-padding item-40px" color="secondary" line="none">
<ion-label class="ion-no-padding" position="floating">Estado</ion-label>
<ion-select class="ion-no-padding select-cadastro" [(ngModel)]="estado">
<ion-select-option value="" active>Selecione</ion-select-option>
<ion-select-option value="sp">SP</ion-select-option>
<ion-select-option value="rj">RJ</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
I need my inputs to have a fixed height size of 40px, to get this result I had to force my row, column, item and input to have a height of 40px, so I styled the following scss on the page:
.item-40px{
--min-height: 40px !important;
--max-height: 40px !important;
height: 40px !important;
--inner-padding-end: 0px !important;
}
But this is where the trouble begins, the gift has been rendered to 40px but the shadow of the gift has not. I have the following result:
And to make it worse the highlight ends up rising inside the input when I decrease the height as print:
Please if you have a solution, it will be of great help!
Obs. It gets very close to what I wanted in this styling, but it was a trick that only worked on Android and yet I didn’t get the result I wanted:
.rol-40px{
height: 40px !important;
--min-height: 40px !important;
margin-bottom: 10px !important;
}
.linha-40px{
height: 40px !important;
--min-height: 40px !important;
margin-bottom: 10px !important;
}
.rol-40px ion-col,
.rol-40px ion-col ion-item,
.rol-40px ion-col ion-item ion-input {
height: 40px !important;
--min-height: 40px !important;
}
.rol-40px ion-col ion-item ion-label{
margin-top: -5px !important;
margin-left: 10px !important;
margin-bottom: 3px !important;
}
.rol-40px ion-col ion-item ion-input{
margin-left: 10px !important;
margin-top: -10px !important;
padding-top: 10px !important;
--min-height: 40px !important;
}