CODEWITHSUNDEEP
htmlcss
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10570

Text doesn't start from the left top of input text field

I have an input field with a fixed height. The text is vertically centered, but I want it at the top left of the input.

CSS

.wideInput{
    text-align: left;
    padding:  0.4em;
    width: 400px;
    height: 200px;
}

HTML

<input class="longInput" value="<?php echo $row['foodPrice']; ?>" />

Here's a jsFiddle that demonstrates the problem > http://jsfiddle.net/9cR5j/

Upvotes: 19

Views: 64320

Answers (6)

Michael
Michael

Reputation: 737

As Pranay Rana said, your padding is causing the problem and his answer is correct. Additionally you can use shortcut propery for padding:

padding: 0 0.4rem 0.4rem 0;

This is the same as: 

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

It takes the values in clockwise order, so first top, right, bottom and then left. And if you want the text to be on multiple lines, use textarea instead of regular input[type=text].

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27354

Try setting the line-height CSS property on the input field to the same as the height of that field.

height:200px; line-height:200px;

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176886

if what that than remove padding: 0.4em; and set 

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

After doing change change class name here 

<input class="wideInput" value="<?php echo $row['foodPrice']; ?>" />

instead of longInput it will be wideInput

Update

JsFiddle demo with TextArea

this will work with textarea only because input is just allow to enter value in one line i.e no enter keyallowed or it doent wrap long text , it just add data in one line

Upvotes: 4

Devang Rathod
Devang Rathod

Reputation: 6736

Instead of input why you not try textarea ?

<textarea class="longInput" cols="30" rows="10"></textarea>

It will add text from left top corner.

Upvotes: 13

Rittmeyer
Rittmeyer

Reputation: 59

To align left and top you would have to set a smaller height and a padding-bottom:

text-align: left;
padding:  0.4em;
padding-bottom:190px;
width: 400px;
height: 10px;

Upvotes: 2

BenM
BenM

Reputation: 53198

Your padding is causing the text to begin 0.4em from the left hand side. If you want the text to be truly left-aligned, remove the padding on the left:

.wideInput{
    text-align: left;
    padding: 0.4em 0.4em 0.4em 0;
    width: 400px;
    height: 200px;
}

Upvotes: 1

Related Questions