html - How to set text area to maximum width in bootstrap -


i'm trying create chat area. it'll display messages on top , input on bottom. want keep "esc" button , "send" button same width, increase textarea maximum width while keeping 3 elements inline. i've tried far.

<div class="col-sm-8">     <div id="chatarea">     </div>      <form class="form-inline" role="form" id="userinput">         <button id="endchat" type="button" class="btn btn-danger">esc</button>          <div class="form-group">             <textarea class="form-control" rows="5" id="messagearea"></textarea>         </div>           <button id="sendmessage" type="submit" class="btn btn-info">send</button>     </form> </div> 

and css

#chatarea {     height: 500px;     background-color: black; }  #messagearea {     width: 322px; }  #endchat, #sendmessage {     width: 70px;     height: 110px; } 

but result (didn't show full chatarea div, bottom).

the problem

so how can make textarea resizes of maximum width while 3 elements (esc, textarea, , send) inline.

html:

    <form role="form" id="userinput">         <button id="endchat" type="button" class="btn btn-danger">esc</button>         <button id="sendmessage" type="submit" class="btn btn-info">send</button>          <div class="form-group">             <textarea class="form-control" rows="5" id="messagearea"></textarea>         </div>      </form> 

note order of #endchat, #sendmessage , .form-group elements.

css:

#endchat {   float: left; }  #sendmessage {   float: right; }  .form-group {   overflow: hidden; }  #messagearea {    width: 100%; }  #endchat, #sendmessage {   height: 110px; } 

Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -