# Height ion-item (Ionic v4)

**URL:** <https://forum.ionicframework.com/t/height-ion-item-ionic-v4/178459>\
**Category:** ionic-v3\
**Created:** [November 26, 2019, 2:05pm UTC](https://forum.ionicframework.com/t/height-ion-item-ionic-v4/178459 "2019-11-26T14:05:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ricardods](https://avatars.discourse-cdn.com/v4/letter/r/bc8723/32.png) [@ricardods](https://forum.ionicframework.com/u/ricardods)\
**Post date:** [November 26, 2019, 2:05pm UTC](https://forum.ionicframework.com/t/height-ion-item-ionic-v4/178459/1 "2019-11-26T14:05:13Z")

</div>

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:

```auto
<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:

```auto
.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:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/8/8/883e629f18db4e16a945174719c728d93dd35465.png)

And to make it worse the highlight ends up rising inside the input when I decrease the height as print:

![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/a/ca3698684a590ebff62e7c7f5d6df849a7f56c5e.png)

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:

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

```

---

<div class="post-metadata">

**Author:** ![wongsiuwing0](https://avatars.discourse-cdn.com/v4/letter/w/3ab097/32.png) [@wongsiuwing0](https://forum.ionicframework.com/u/wongsiuwing0)\
**Post date:** [September 23, 2024, 1:27pm UTC](https://forum.ionicframework.com/t/height-ion-item-ionic-v4/178459/2 "2024-09-23T13:27:35Z")

</div>

I love how it is 10.0k views And still no one have any answer,