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).
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
Post a Comment