CSS width: 100% textarea for comments (responsive)
I need a little help for my CSS.
I am trying to create a commenting system but something went wrong.
This is my DEMO page from codepen.io
You can see that there is a user avatar and a text box. The container max-width:650px;
, when you shrink the browser width, it automatically resizes.
Can anyone help me in this regard?
Html
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
CSS
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: left;
width:100%;
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
I want to do it like this:
source to share
You can try using calc();
to do the calculation for you ... bearing in mind that you will need to add vendor prefixes to this.
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: right;
width: calc(100% - 45px);
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
source to share
as an option instead of displaying using float: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: #00f;
height: auto;
display: table;
width: 100%;
padding: 5px;
}
.commenter,
.comment-text-area{
display: table-cell;
vertical-align: top;
}
.commenter{
width: 35px;
padding-right: 5px;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
width:100%;
height: 100%;
/*background-color: red;*/
}
.textinput {
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
source to share
For scenarios like this, I combine float:left;
and the float:none;
Avatar float:left;
wrapper div gets and the comment wrapper gets the div float:none;
.
The trick here is to put padding-left
on a div float:none;
equal to the width of the div float:left;
.
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
width:35px;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: none;
height: auto;
background-color: red;
padding-left:35px;
}
Here is a working demo
source to share
See fiddle
I changed my CSS a bit. See Changes below. The problem with your CSS was that you weren't using width for .commenter
. So it used the default width of 100%.
CSS
.commenter {
float: left;
width: 6%;
}
.comment-text-area {
float: left;
width: 94%;
height: auto;
background-color: red;
}
EDIT
use width for .commenter
like width: 35px;
.. I chose 35px because that is the width of the avatar image.
source to share
change only .comment-text-area
height:94%
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: left;
width: 94%;
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
source to share
you can assign the class name form-control
<textarea>
like this:
<textarea class="form-control" rows="3" cols="90" ></textarea>
Link: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
source to share