Height ion-item (Ionic v4)

@ricardods wrote:

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:

image1328×638 85.9 KB

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

Posts: 1

Participants: 1

Read full topic