CODEWITHSUNDEEP
htmlcss
hexagonest
hexagonest

Reputation: 632

textarea placement is wonky

Why is my text area placement different than my input type="text" placement?

Snippet related.

input[type="text"], textarea {
  height:100px;
}

/* no css other than height to show my point */
<form>
  <input type="text" placeholder="Form 1, input type=text"/>
  <input type="button" value="Form 1"/>
  <input type="button" value="It is centered"/>
</form>

<form>
  <textarea placeholder="Form 2, textarea."></textarea>
  <input type="button" value="Form 2"/>
  <input type="button" value="Not centered"/>
</form>

Upvotes: 0

Views: 252

Answers (2)

Samurai
Samurai

Reputation: 3754

If you mean its placement regarding the sibling inputs then you can set vertical-align for the textarea:

textarea {
    vertical-align: middle;
    /* the rest of your styles */
}

EDIT:

Vertical-align has default value of baseline.
The baseline for textarea is towards the bottom (if you have an inline-block div instead of the textarea it'd be the same). But baseline for input[type=text] - as it naturally has only one line - is in the middle. So we need to explicitly add vertical-align: middle for the textarea.

Upvotes: 2

ymdahi
ymdahi

Reputation: 175

I've made some assumption to try and best answer your question. Check out the code snippet and feel free to let me know if I misunderstood your question.

Basically, the reason that input buttons in the second form due not vertically align is because the textarea element does not adhere to the "height" attribute (the height attribute is not listed on W3C's site: http://www.w3schools.com/tags/tag_textarea.asp).

The textarea uses the attributes cols and rows to define it's size.

Next, to position the input buttons such that they are vertically-centered, you can apply the following CSS:

  form.middleFloat textarea { vertical-align: middle; }
  form.middleFloat input,
  form.middleFloat textarea {display: inline-block; }

Snippet created for reference.

      form { margin: 10px 0; }
      
      form.middleFloat textarea{
        vertical-align:  middle; 
        
      }
      form.middleFloat input, form.middleFloat textarea {
        display: inline-block;
      }
<form>
  <input type="text" placeholder="Form 1, input type=text"/>
  <input type="button" value="Form 1"/>
  <input type="button" value="It is centered"/>
</form>

<form class="middleFloat">
  <textarea cols="50" rows="5" placeholder="Form 2, textarea."></textarea>
  <input type="button" value="Form 2"/>
  <input type="button" value="Not centered"/>
</form>

Upvotes: 1

Related Questions