13
Views
1
Comments
Solved
Custom height for input widget.

What is the correct way to change the height and background of an input widget in mobile app?

If I change it in the screen style sheet as 

.tablet .form-control[data-input], 
.tablet .form-control[data-textarea],
.phone .form-control[data-input], 
.phone .form-control[data-textarea]
{
    height: 42px;
}

Then, for Iphone, the text prompt is moving up, shown below.

And this does not happen for all the mobiles, only Iphone X(as of now). Please tell me what the correct way to change this is, as adding a css class does not work out.

Rank: #541
Solution

Hi Amol, 

I think that the problem is with the line-height style property.

You can set it to the same value as you put in height.

.tablet .form-control[data-input], 
.tablet .form-control[data-textarea],
.phone .form-control[data-input], 
.phone .form-control[data-textarea]
{
    height: 42px;
    line-height: 42px;
}

Hope it helps.

Best regards