CODEWITHSUNDEEP
css
user9644796
user9644796

Reputation:

textarea and submit button same height and same line

I try to make my textarea and submit button within a form to be the same line(and height), so that the text area takes up 90% of the width and the submit button takes 10%, but what I get is the following:

textarea {
display:inline-block;
width:90%;
resize:none;
}
#submit {
display:inline-block;
width:10%;
margin-bottom:-10px
}
<form>
<textarea cols="30" rows="1" placeholder="Text here"></textarea>
<input id="submit" type="submit" value="Send"> 
</form>

How to fix it so that the button and textarea are the same line, and take up the same height?

Thanks

Upvotes: 2

Views: 2807

Answers (6)

Gezzasa
Gezzasa

Reputation: 1453

Use display: flex; on the form and remove the `display: inline-block' style from the elements inside

https://jsfiddle.net/zbwv9q97/

form{
  display:flex
}

textarea {
  width:90%;
  resize:none;
}

#submit {
  width:10%;
}

Upvotes: 0

Jos van Weesel
Jos van Weesel

Reputation: 2188

By using a combination of the box-model and display: flex. Both elements are now on the same line and are the same height, as you asked :)

* {
  box-sizing: border-box;
}

form {
	display: flex;
}

textarea {
  display: inline-block;
  width: 90%;
  resize: none;
}

#submit {
  display: inline-block;
  width: 10%;
}
<form>
  <textarea cols="30" rows="1" placeholder="Text here"></textarea><input id="submit" type="submit" value="Send">
</form>

Upvotes: 0

Paul
Paul

Reputation: 158

The problem is that the border of the elements and also their default margin/padding adds to their size. Therefore they are bigger than 90% or 10%.

A solution would be to either use box-sizing: border-box which prevents margin and padding from adding value to the size or to use a lower percentage like 85% and 8% or something like that.

Edit Read for further information: https://www.w3schools.com/css/css_boxmodel.asp

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

use display:flex

form{
  display:flex
}

textarea {
  display:inline-block;
  width:90%;
  resize:none;
}

#submit {
  display:inline-block;
  width:10%;
  margin-bottom:-10px
}
<form>
  <textarea cols="30" rows="1" placeholder="Text here"></textarea>
  <input id="submit" type="submit" value="Send"> 
</form>

Upvotes: 4

I am Who I am
I am Who I am

Reputation: 33

You can also touch the height of the submit button to make them equal :)

form{
display:flex
}
textarea {
display:inline-block;
width:80%;
resize:none;
}
#submit {
display:inline-block;
width:15%;
height: 21px;
margin-bottom:-10px
}
<form>
<textarea cols="30" rows="1" placeholder="Text here"></textarea>
<input id="submit" type="submit" value="Send"> 
</form>

Upvotes: 1

Karen Grigoryan
Karen Grigoryan

Reputation: 5422

Simplest is using display flex. Also you can remove display: inline-block and margin-bottom, and center items with align-items: center.

form {
  display: flex;
  align-items: center;
}

textarea {
  width: 90%;
  resize: none;
}

#submit {
  width: 10%;
}
<form>
  <textarea cols="30" rows="1" placeholder="Text here"></textarea>
  <input id="submit" type="submit" value="Send">
</form>

Upvotes: 0

Related Questions