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 fix redefinition warnings from CSS Validator?

    How to add fade in and fade out when changing between texts in javascript

    css code how to put the navigation in the middle

    How can I keep things aligned in an adaptive layout

    How to use CSS for mobile in the right way?

    How to select all fields from a single box?

    How can I get this style effectv with css or jquery?

    How to override default CSS in modern GWT applications?

    How do I style a different border?

    How to structure elements in jQuery Mobile

    why is .show() making the target div appear at top of page?

    How to combine wildcard and not selectors in CSS

    how to dynamically change css class for html form elements based on other css class

    How to set height to wrap text only in certain screen size

    How can I change input type of Yii CJuiAutoComplete?

    Space on Navigation right and left…how to remove it?

    how to position nested list items?

    How can a

    How do I do rounded corners in CSS in Google Chrome

    how to give dynamic height in css

    How to flatten checkbox using CSS? [duplicate]

    How to make a pie chart in CSS

    How to position
    element absolute from browser window?

    How to have 100% width for last column only in html and css?

    How to fit whole image in to div which have his dimensions

    How to deploy just HTML, CSS webpage to jetty?

    how to force page break between absolutely positioned elements in css

    How would you go about placing li in different divs?

    How to show borders of th elements with gradient fills in IE9?

    How to position and style blockquote in css