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/
Related
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
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>
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.
I'm new to world of forms! I had made divs and css for the exact layout I want for the forms. Is there anyway to maybe just turn that div tag into button or a text field while still using the same css rules so the layout doesn't change?
Here is some code and demo to just check what I have going on.
HTML
<div id="loginContainer">
<div id="loginForm">
<div id="login"></div>
<div id="loginUsername"></div>
<div id="loginPassword"></div>
<div id="loginSubmit"></div>
</div>
<div id="registerForm">
<div id="register"></div>
<div id="registerName"></div>
<div id="registerEmail"></div>
<div id="registerPassword"></div>
<div id="registerPasswordConfirm"></div>
<div id="registerSubmit"></div>
</div>
</div>
CSS
#loginContainer {
width: 50%;
height: 50%;
position: absolute;
left: 21.8%;
top: 40%;
z-index:-9999;
}
#loginForm {
width:47.5%;
height: 100%;
float:left;
top: 0%;
position:relative;
}
#login {
width: 100%;
height: 10%;
top: 0;
background-image:url(../_images/_login/login.png);
background-size: 100% 100%;
position: absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#loginUsername {
width: 100%;
height: 10%;
top: 15%;
background-color: #383d3f;
position: absolute;
border-radius: 5px;
}
#loginPassword {
width: 100%;
height: 10%;
top:30%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#loginSubmit {
width: 100%;
height: 10%;
top: 45%;
background-color:#76c2bb;
position:absolute;
border-radius: 5px;
}
#registerForm {
width:47.5%;
height: 100%;
float:right;
top: 0%;
position:relative;
}
#register {
width: 100%;
height: 10%;
top:0%;
background-image:url(../_images/_register/register.png);
background-size: 100% 100%;
position:absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#registerName {
width: 100%;
height: 10%;
top:15%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerEmail {
width: 100%;
height: 10%;
top: 30%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerPassword {
width: 100%;
height: 10%;
top: 45%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerPasswordConfirm {
width: 100%;
height: 10%;
top: 60%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerSubmit {
width: 100%;
height: 10%;
top: 75%;
background-color:#76c2bb;
position:absolute;
border-radius: 5px;
}
CLICK FOR DEMO
Sure you can, just replace the right elements with input with proper markup, add an opening and closing form tag, remove the borders, and you're good to go:
<div id="loginContainer">
<div id="loginForm">
<div id="login"></div>
<form method="post" name="loginForm">
<input id="loginUsername" type="text" name="loginUsername" />
<input id="loginPassword" type="text" name="loginPassword" />
<input id="loginSubmit" type="submit" name="loginSubmit" value="" />
</form>
</div>
<div id="registerForm">
<div id="register"></div>
<form method="post" name="loginForm">
<input id="registerName" type="text" name="registerName" />
<input id="registerEmail" type="text" name="registerEmail" />
<input id="registerPassword" type="text" name="registerPassword" />
<input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" />
<input id="registerSubmit" type="submit" name="registerSubmit" value="" />
</form>
</div>
</div>
#loginContainer input {
border:0
}
Here is your updated demo: http://jsfiddle.net/7w1adgko/2/
EDIT: Note that you may want to fill out the value property of the submit buttons so that users will actually know it's the submit button.
<input id="loginSubmit" type="submit" name="loginSubmit" value="Login" />
or...
<input id="registerSubmit" type="submit" name="registerSubmit" value="Register" />
Also, in order users to know what field is what, you may want to use the placeholder property.
<input id="loginUsername" type="text" name="loginUsername" placeholder="Username" />
<input id="loginPassword" type="text" name="loginPassword" placeholder="Password" />
or...
<input id="registerName" type="text" name="registerName" placeholder="Name" />
<input id="registerEmail" type="text" name="registerEmail" placeholder="Email" />
<input id="registerPassword" type="text" name="registerPassword" placeholder="Password" />
<input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" placeholder="Confirm Password" />
And to make it prettier, you could add some colour and padding to the inputs.
#loginContainer input {
border:0;
padding: 0 10px;
color:white
}
Here is your most recent fiddle with these changes: http://jsfiddle.net/7w1adgko/3/
EDIT 2: To make all the boxes have the same width, you could specify the same box model for type="text" and type="submit" inputs (source: CSS: Submit button looks smaller than text input and textarea)
#loginContainer input {
border:0;
padding: 0 10px;
color:white;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Here is the updated fiddle: http://jsfiddle.net/7w1adgko/4/
It would be better to start from the proper functional markup and then consider styling. For the functionality of a form, you need elements like input to set up the controls, label to have labels (captions) associated with controls, and form to contain the entire form. (And you probably should not have two forms side by side, it can be confusing.)
However, if you have designed a layout in a “DIVistic” way and you wish to turn it to a functional form element with working controls, you need to take into account that form-related elements have default rendering that you may need to override. A form element has top and bottom margin by default, label elements are inline elements (display: inline) as opposite to div elements that are blocks (display: block), and input elements are inline blocks that have borders and padding.
On the other hand, most (if not all) of your div elements are just containers, instead of being direct counterparts to controls. For example, the element <div id="loginUsername"></div> really needs some content, such as
<div id="loginUsername"><label for="uname">User name:</label>
<input id="uname" name="uname" required size="8" maxlength="8"></div>
Assuming that the content fits inside the div element as formatted in your current design, no change in the layout styling is then needed. (However, from the jsfiddle, it seems that you intend to use form controls without any labels. This would be a major usability and accessibility problem, and fixing it probably requires a redesign of the layout.)
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]