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

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).
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.

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;
}

When using bootstrap I suggest to try formatting the bootstrap classes in css. Often the bootstrap formatting overrides your own css file unless you override them in your own css-file. Try this:
#endChat {
float: left;
}
#sendMessage {
float: right;
}
.form-group {
overflow: hidden;
display: block;
}
.form-control#messageArea{
width: 100%;
}
#endChat, #sendMessage {
height: 110px;
}

remove following code from your css:
#messageArea {
width: 322px;
}
form-control class of textarea will auto resize its width to 100% of the area.

Related

How do I get my search bar to fill remaining 100% horizontal div space?

I would like my "Search by Name" #left div to extend the entire red area:
#main {
border: 1px solid black;
font-size: 20px;
font-weight: bold;
color: white;
}
#left {
width: 100%;
background-color: red;
}
#center {
float: right;
width: 230px;
background-color: blue;
}
#right {
float: right;
width: 45px;
background-color: green;
}
<div id="main">
<div id="right">
<button name="button" type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div id="center">
<div class="dropdown bootstrap-select show-tick select-picker navbar-margins">
<select name="tag_id[]" id="tag_id_" class="select-picker navbar-margins" data-actions-box="true" data-selected-text-format="count > 1" data-title="No Tags Selected" data-deselect-all-text="Select None" multiple="multiple" tabindex="-98"></select>
</div>
</div>
<div id="left">
<input type="text" name="q" id="q" placeholder="Search by Name or Contact Info">
</div>
</div>
When I add the following to span my #q div then the element gets bumped down:
css:
#left #q {
width: 100%;
}
Stop using floats and use flex instead:
#main {
border: 1px solid black;
font-size: 20px;
font-weight: bold;
color: white;
display: flex; /* use this instead of floats */
}
#left {
flex-grow: 1; /* make this grow to fill remaining space */
}
#left input {
width:100%; /* optional - make the input fill the div */
}
#center {
width: 230px;
background-color: blue;
}
#right {
width: 45px;
background-color: green;
}
<div id="main">
<div id="left">
<input type="text" name="q" id="q" placeholder="Search by Name or Contact Info">
</div>
<div id="center">
<div class="dropdown bootstrap-select show-tick select-picker navbar-margins">
<select name="tag_id[]" id="tag_id_" class="select-picker navbar-margins" data-actions-box="true" data-selected-text-format="count > 1" data-title="No Tags Selected" data-deselect-all-text="Select None" multiple="multiple" tabindex="-98"></select>
</div>
</div>
<div id="right">
<button name="button" type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
What has happened here is you have told the input inside left to be 100% of the red container, however the red container stretches all the way across the screen.
Then when you tell the input to also be 100% it hits into the other containers and drops down.
You could probably get this idea working by setting it to 85% instead of 100% but you will hit into issues every time you resize things.
A better way might be to look into a css property called flex. This allows you to do what you without having to set fixed values.

Responsive input field and submit button using display:table-cell

I am trying to have the input field and the submit button stretch across the screen in the same row. Basically so the submit button does not ever go below the input field. Not even sure if I need to add an extra or not. I know that I have seen a way to have a responsive input field and submit button using display:table-cell, but I have not been able to find it lately. Any help would be appreciated.
**EDIT
I added: margin-left: -8px; to the submit button and that did the trick. Not sure if there is a better way but this works. Any other ways would be appreciated as well.
#div1{
display:table;
width:100%;
}
#div2{
display:table-cell;
}
input[type="email"].form-control {
width: 80%;
padding: 0px;
margin: 0px;
}
input[type="submit"].btn.btn-primary {
width: 20%;
padding: 0px;
margin: 0px;
margin-left: -8px;
}
<div id="div1">
<div id="div2">
<input type="email" name="EMAIL" class="form-control"
placeholder="Enter your E-mail Address">
<input type="submit" value="Subscribe" class="btn btn-primary">
</div>
</div>
Are you Trying to achieve something like this using display:table-cell ?
<div id="div2">
<input type="email" name="EMAIL" class="form-control"
placeholder="Enter your E-mail Address">
<input type="submit" value="Subscribe" class="btn btn-primary">
* {
box-sizing: border-box;
}
#div2 {
display: table;
width: 100%;
}
#div2 > * {
display: table-cell;
}
#div2 > input[type='email'] {
width: 80%;
}
#div2 > input[type='submit'] {
width: 20%;
}
the key is box-sizing: border-box; you can write it just for your desired elements
https://jsfiddle.net/uw4u6ta5/3/
The line feed between the two s creates a space between them on the page. You have to remove the line feed, or use this trick :
<input type="email" name="EMAIL" class="form-control" placeholder="Enter your E-mail Address"><!--
--><input type="submit" value="Subscribe" class="btn btn-primary">
Also you have to remove border because it has 2px border so it's width is 20%+80%+ 2px+2px+2px+2px(left and right for two inputs)
use
border:0;
check this updates jsfiddle please
Check this post remove spaces between inputs
You really don't need two divs wrapping your inputs for this. You need to set the div to white-space: nowrap; to keep your inputs on one line. Simply set your inputs to width: 50%; or you may choose any other combination targeting each input specifically.
#div2 {
display: block;
margin: 0 auto;
width: 100%;
white-space: nowrap;
}
input {
display: inline-block;
width: 50%;
}
If you want the input to be 80% and the button to be 20% you need to target them individually with your classes.
.form-control {
display: inline-block;
width: 80%;
margin: 0;
padding: 0;
}
.btn-primary {
width: 20%;
margin: 0 auto;
padding: 0;
}
(JSFiddle) Updated

Expand search div to the button

I've HTML structure like following
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
<div style="clear:both"></div>
</div>
and CSS as following
.box-search-select{
width:100%;
padding:20px 0;
}
.search-left{
float:left;
width: 90%;
}
.search-left input{
width:100%;
}
button{
float:right;
}
Output : (Normal screen size)
I want to expand "search-left" div width to the Search button.
Which should work properly for fluid responsive layouts too.
Here I've created fiddle if you wish to play : https://jsfiddle.net/j7g8143a/1
Now if I decrease the width of screen then the search button move to next line like following picture
but I want the "search-left" div to automatically adjust it's width according to screen size like following picture.
I need only CSS solution without using any media queries
EDIT: It should have to be compatible with IE9.
Here is your solution with demo and it will be work on IE9 also:
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
</div>
.box-search-select {
padding: 20px 68px 20px 0; /* give padding-right equal to button witdh */
position: relative;
}
.search-left input {
display: block;
width: 100%;
}
button {
background: #cccccc none repeat scroll 0 0;
border: 1px solid #dddddd;
padding: 1px;
position: absolute;
right: 0;
top: 20px;
width: 60px;
}
Demo:
https://jsfiddle.net/0u83dbm7/
You can use Flexbox
.box-search-select {
display: flex;
align-items: center;
}
.search-left {
flex: 1;
}
input {
width: 100%;
}
<div class="box-search-select">
<div class="search-left"><input id="search" type="text"></div>
<button type="submit" class="button">Search</button>
</div>
You can also use CSS tables
.box-search-select {
display: table;
}
.search-left,
button {
display: table-cell;
vertical-align: middle;
}
.search-left {
width: 100%;
}
input {
width: 100%;
}
<div class="box-search-select">
<div class="search-left"><input id="search" type="text"></div>
<button type="submit" class="button">Search</button>
</div>
Its gonna work I think
<div class="box-search-select">
<div class="search-left" style="width:80%">
<input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
<div style="clear:both"></div>
</div>
<style>
#search{
width:100%;
}
.box-search-select{
width:100%;
padding:20px 0;
}
.search-left{
float:left;
width: 90%;
}
.search-left input{
width:100%;
}
button{
float:right;
}
</style>
please let me know if this is not the expected output.
Put your input and button inside the div and use display:flex
.box-search-select{
padding:20px 0;
float:left;
width:100%
}
.search-left{
float:left;
width:100%;
display:flex;
}
.search-left input{
width:100%
}
button{
float:right;
}
<div class="box-search-select">
<div class="search-left">
<input id="search" type="text">
<button type="submit" class="button">Search</button>
</div>
<div style="clear:both"></div>
</div>

Fit form horizontally in responsive box

I want the input to adjust so the button doesn't drop to the next line in this example.
I've tried a few things but I can't do it in a clean way.
<div class="col-lg-3">
<form class="search" method="get" action="/" role="search">
<input type="search" name="s" placeholder="Search">
<button class="glyphicon glyphicon-search" role="button" type="submit"></button>
</form>
</div>
form {
input {
width: 145px;
}
button {
width: 50px;
}
}
Please updated the following style.
button {
width: 50px;
left: -5px;
}
Or
Add the display property for the search class.
.search {display: inline-flex;}
How about you use flexbox if you can suport it?
form {
display: flex;
}
input {
flex-grow: 1;
width: 100%;
max-width: 150px;
}
button {
width: 50px;
}
https://jsfiddle.net/33cL1v6s/3/

Horizontal CSS - Input Field 100% and Margin for button

Task: Make text box 100% width but allow enough room for button.
Problem: Button appears on next line and text box exceeds width of its container.
<div class="field">
<input type="text" name="my-field" />
<input type="button" id="my-button" value="Add +" />
</div>
.field {
margin-right: -70px;
width: 100%;
}
.field input[type=text] {
display: block;
float: left;
margin-right: 70px;
}
.field input[type=button] {
display: block;
float: right;
}
My primary layout uses the following trick to achieve flexible width with fixed sidebar, but for some reason this is not working on the above.
<div class="outer-wrap">
<div class="content">
...
</div>
<div class="sidebar">
...
</div>
</div>
.outer-wrap {
margin-right: -300px;
width: 100%;
}
.content {
float: left;
margin-right: 300px;
}
.sidebar {
float: right;
}
What mistake am I making here?
You have to screw with the HTML a bit, but otherwise this works perfectly in IE7+ and all modern browsers.
See: http://jsfiddle.net/thirtydot/25bZC/
CSS:
.field > span {
display: block;
overflow: hidden;
padding-right: 10px
}
.field input[type=text] {
width: 100%
}
.field input[type=button] {
float: right
}
HTML:
<div class="field">
<input type="button" id="my-button" value="Add +" />
<span><input type="text" name="my-field" /></span>
</div>
To pull this off you must ensure that the element which you are floating right comes before the one floating left. Like this
<div class="field">
<input type="button" id="my-button" value="Add +" />
<input type="text" name="my-field" />
</div>
try giving fixed width to
field input[type=text]
and
.field input[type=button]