CODEWITHSUNDEEP
htmlcsstextarea
Din
Din

Reputation: 535

HTML textarea shows dynamic text half the height

HTML <textarea> shows dynamic text half its height when it first loads [when the page loads] like this: enter image description here

When you focus and start typing or pushing left or right arrow keys, then it shows the text to its full height as it should like this. enter image description here

How to make the dynamic text appear at its full height when it first loads without having to focus on the <textarea> and push right/left arrow keys? Here is the HTML and CSS codes:

textarea {
  height: 55px;
  background-color: #009688;
  font-size: 55px;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden"></textarea>

Thank you.

Upvotes: 1

Views: 702

Answers (6)

Blues Clues
Blues Clues

Reputation: 1838

Try this: I just remove the padding. You can also add the padding just add more height

Explanation:

The size of font and the height of textarea is the same PLUS you have a padding.

textarea {
    height: 55px;
    background-color: #009688;
    font-size: 55px;
    width: 100%;
    /*padding: 12px 20px;*/
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">Prefilled</textarea>

Upvotes: 0

Pete
Pete

Reputation: 58412

You want the height to include the padding and border size as you have used box-sizing so your height should be the size of the font plus top and bottom padding and border

In this case that is 55px (font) + 24px (12px top and 12px bottom padding) + 2px (border - you have no top and 2px bottom) = 81px

textarea {
    height: 81px;
    background-color: #009688;
    font-size: 55px;
    line-height:55px;         /* added this just to ensure the line height is the same as the font size */
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">someText</textarea>

Upvotes: 0

japu soft dev
japu soft dev

Reputation: 80

Adjust font-size and padding like 

padding: 12px 12px;
and 
font-size: 40px;

Upvotes: 0

DadyByte
DadyByte

Reputation: 914

I think it is because the padding/margin you have added. Try running by removing the padding/margin and see if that works for you.

Upvotes: 1

Tavish Aggarwal
Tavish Aggarwal

Reputation: 1060

Just increase height as height and font-size is same:

textarea {
    height: 80px;
    background-color: #009688;
    font-size: 55px;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}

Upvotes: 0

Anmol Sandal
Anmol Sandal

Reputation: 1488

Please check the updated one. Added line-height and updated attribute to rows=1 instead of giving height to textarea.

textarea {
    min-height: 55px;
    background-color: #009688;
    font-size: 55px;
    line-height: 60px;
    width: 100%;
    padding: 0 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}
<textarea id="location" rows="1" style="overflow:hidden"></textarea>

Upvotes: 0

Related Questions