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:

enter image description here

+3


source to share


6 answers


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>
      

Run codeHide result


+6


source


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>
      

Run codeHide result


+3


source


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

+2


source


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.

0


source


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>
      

Run codeHide result


0


source


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

-1


source







All Articles