CODEWITHSUNDEEP
htmlcss
Shankar
Shankar

Reputation: 3088

textarea width:100% not working in case of absolute position

here is the code i am using,

html

<div class="chatbrd"> 
  <div class="newmsg">
    <form  action="" method="post">
     <textarea placeholder="type a message" type="text" name="msg" >
     </textarea>

     <button type="submit"  name="newmsg" value="submit">send</button>
 </form>
  </div>
</div>

CSS

.chatbrd
{
height:800px;
position:relative;
overflow:auto;
max-height:200px;
border:1px solid black
}

.newmsg
{
 position:absolute;
 bottom:0;
  max-width:600px;  

 }
.newmsg textarea
{
width:100%;

}

see here jsfiddle

i want that the width of a textarea should be equals to the width of outer div but i stucked.

Upvotes: 1

Views: 1040

Answers (2)

Derek Story
Derek Story

Reputation: 9593

You need to give the parent width: 100%; which will still adhere to the max-width: 600px. This is because the child text area needs to know of what its taking 100% width.

JS Fiddle

.newmsg {
   position:absolute;
   bottom:0;
   max-width:600px;  
   width: 100%;
 }

Upvotes: 6

Head In Cloud
Head In Cloud

Reputation: 2051

Try this

    .newmsg
{
 position:absolute;
 bottom:0;
/*  max-width:600px;   */
  width:100%;

 }


.chatbrd
{
height:800px;
position:relative;
overflow:auto;
max-height:200px;
border:1px solid black
}

.newmsg
{
 position:absolute;
 bottom:0;
/*  max-width:600px;   */
  width:100%;

 }
.newmsg textarea
{
width:100%;

}
<div class="chatbrd"> 
  <div class="newmsg">
    <form  action="" method="post">
     <textarea placeholder="type a message" type="text" name="msg" >
     </textarea>

     <button type="submit"  name="newmsg" value="submit">send</button>
 </form>
  </div>
</div>

Upvotes: 2

Related Questions