How to set text area to maximum width in bootstrap


Tags: html,css,twitter-bootstrap

Problem :

I'm trying to create a chat area. It'll display the messages on top and the input on the bottom. I want to keep the "esc" button and "send" button the same width, but increase the textarea to maximum width while keeping all three elements inline. This is what I've tried so 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 the css

#chatArea {
    height: 500px;
    background-color: black;
}

#messageArea {
    width: 322px;
}

#endChat, #sendMessage {
    width: 70px;
    height: 110px;
}

But this is the result (didn't show the full chatArea div, only the bottom).

the problem

So how can we make it so the textArea resizes itself to be of maximum width while the 3 elements (esc, textArea, and send) are inline.



Solution :

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 the order of #endChat, #sendMessage and .form-group elements.

CSS:

#endChat {
  float: left;
}

#sendMessage {
  float: right;
}

.form-group {
  overflow: hidden;
}

#messageArea {
   width: 100%;
}

#endChat, #sendMessage {
  height: 110px;
}

    CSS Howto..

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    How to Rotate Text and have it's Parent Div act Dynamically

    Using CSS to show gradient as well as an image

    how to know about the font information in a psd file?

    What is the ::content pseudo-element and how does it work?

    How do I set a cursor css for text inside li element?

    How do I convert scss to css

    How to specify font-size for all bold text in the div?

    How do I specify another width for newly added divs in javascript

    How to load Different css everytime onload

    How to create a vertical column in a table using css

    How can I add specific css id to parent menu with php or javascript

    how to align div horizontally using CSS?

    How to display a full-width grid of images that resizes and flows with the browser window with pure CSS

    How to flatten checkbox using CSS? [duplicate]

    How NOT to combine all CSS into one file with SASS and bootstrap

    How to include border-radius.htc in MVC architecture to make border-radius work in IE

    How to changes styles on first elements using CSS

    How to change the CSS for all elements with a common identifier using Javascript?

    How to Javascript to load a css file only for one specific page?

    How to override w3.css for table border

    how to remove resize in text area tag

    How to include css from resources folder in symfony 2

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How to use Image instead of border-right with CSS in Wordpress?

    How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?

    How to reference this line in CSS, HTML

    How can I modify footer color dynamically when I switch to another page in html and css

    How to access css selector properties after getting access to selector

    How do I style a Javascript button using d3?