Here is the HTML:
<form action="http://www.google.com/search" method="get" class="google">
<input type="hidden" name="as_q" value="site:hyoutube.com/" />
<p><label for="keyword">Search</label>
<input type="text" size="20" id="keyword" name="q" value="" class="sfield" /></p>
<p><input type="submit" value="Search" class="sbutton" /></p>
</form>
Here's the CSS:
.google{
display: flex;
flex-flow: row wrap;
align-items: center;
}
.sfield{
height: 24px;
}
.sbutton{
height: inherit;
}
JSFIDDLE
As you can see, the search field is of different height to the search button. How can I make them the same height without using absolute values like "14px"?
I tried to look it up, but I was unable to find a straight-forward solution. How should I go about this?
Thank you!
Only add "display: flex;" on the parent element and then add 100% height on button like this
.google{
display: flex;
width: 100%;
}
.sbutton{
height: 100%;
}
JSFIDDLE
Related
Consider the situation below:
.form-container {
background-color: red;
}
.search-form {
display: flex;
align-items: flex-start;
}
<div class="form-container">
<form role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Test form</span>
<input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
</label>
<input type="submit" class="search-submit button" value="search" />
</form>
</div>
I need to have this flex form fill out full width, so that it covers the red but it won't for some reason...
Flexbox: how to get divs to fill up 100% of the container width without wrapping?
to prevent the flex items from shrinking, set the flex shrink factor
to 0:
The flex shrink factor determines how much the flex item will shrink
relative to the rest of the flex items in the flex container when
negative free space is distributed. When omitted, it is set to 1.
.form-container {
background-color: red;
}
.search-form {
display: flex;
align-items: flex-start;
flex-shrink: 0;
}
<div class="form-container">
<form role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Test form</span>
<input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
</label>
<input type="submit" class="search-submit button" value="search" />
</form>
</div>
Doesn't work..
I also attempted width: 100%;
Also from Flexbox: how to get divs to fill up 100% of the container width without wrapping?
In my case, just using flex-shrink: 0 didn't work. But adding flex-grow: 1 to it worked.
.form-container {
background-color: red;
}
.search-form {
display: flex;
align-items: flex-start;
flex-shrink: 0;
flex-grow: 1;
}
<div class="form-container">
<form role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Test form</span>
<input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
</label>
<input type="submit" class="search-submit button" value="search" />
</form>
</div>
Flexbox not full width
I already tried flex-grow above and it didn't do anything.
How do you make a flex form fill full width of it;'s parent container?
your body element likely has a margin and wasn't set to a width of 100%. You also don't define the width of the parent container so, it's defaulting to auto.
This can be remedied as follows:
body {
width: 100%;
margin: 0;
}
.form-container {
background-color: red;
width: 100%;
}
Ok I figured it out you do it on the child
.form-container {
background-color: red;
}
.search-form {
display: flex;
align-items: flex-start;
}
.sesrch-form label {
flex-grow: 1;
}
<div class="form-container">
<form role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Test form</span>
<input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
</label>
<input type="submit" class="search-submit button" value="search" />
</form>
</div>
This is killing me. https://leadcheetah.com/dummy.php - Not sure why I can't center the input box and submit button. I've tried using bootstrap columns and manually adding align="center"
<div class="search-container" style="transform: translateY(0px);">
<!-- Form -->
<h2 align="center">Search Finder Tool</h2>
<form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
<input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
<p><input type="submit" class="button" value="Find Emails"></p>
</form>
<!-- Browse Jobs
<div class="browse-jobs">
Browse job offers by category or location
</div> -->
</div>
.search-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
form {
display: flex;
justify-content: center;
flex-flow: row wrap;
align-items: center;
}
p {
margin: 0;
}
<div class="search-container">
<!-- Form -->
<h2 align="center">Search Finder Tool</h2>
<form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
<input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
<p><input type="submit" class="button" value="Find Emails"></p>
</form>
<!-- Browse Jobs
<div class="browse-jobs">
Browse job offers by category or location
</div> -->
</div>
fiddle link with bootstrap
Button out from form and input and button inline center. I added a parent div for form and button so please check html also.
Edit as your requirement
Without the use of Flexbox (as it's not supported in many browsers)
Your markup should look similar to the following
<form method="POST" action="email-extract/email-extractor-service.php" id="findemail" style="width: 100%;text-align: center;margin: auto;">
<input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value="">
<input type="submit" class="button" value="Find Emails">
</form>
Adjusted styles
#findemail {
width: 100%;
text-align: center;
margin: auto;
}
Remove the float:left and margin-right: 2% from .search-container input and add margin: auto; to it.
Result
Edit: Also, make sure to remove the <br> tags.
On all components that you wish to center, ensure there are the following styles and that they are not being over-ridden.
margin-right: auto;
margin-left: auto;
Also noticed that there is a
float:left;
that will have to be removed from the CSS.
Hope it helps.
I have this form with four input elements in a row (in desktop view).
Can anybody tell me how to get those four input elements to break into rows when the screen width gets below, say, 680px?
form {
display: flex;
}
input {
width: 25%;
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
Use a media query with a breakpoint of 680px and flex-direction:column;
form {
display: flex;
}
#media screen and (max-width: 680px) {
form {
flex-direction: column;
}
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
By default, flex items line up in a row. An initial value on a flex container is flex-direction: row.
Switching to flex-direction: column is one good method for stacking items vertically. This method is already covered in another answer.
Another method would be to enable flex-wrap and give each input width: 100%.
This would allow only one input per row, forcing subsequent inputs to wrap.
form { display: flex;}
input { width: 25%; }
#media ( max-width: 680px ) {
form { flex-wrap: wrap; }
input { width: 100%; }
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
jsFiddle
So I have a simple login prompt like this:
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</form>
and the css:
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
https://jsfiddle.net/tzc6Lpur/
What I would like is that the bottom items are stretched over the entire width of the element so that login button would be lined up to the right end of the password box. Something like text-align: justify; would to that for text but I can't find an easy way to do this. Ofcourse I could manually position the elements but that just seems to be a lot redundant code.
any help is appreciated!
The easy way would be to change your markup accordingly:
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<div class="flex-wrap">
<label for="myCheckbox"><input name="myCheckbox" type="checkbox">Remember</label>
Forgot?
Register
<input type="submit" value="Login">
</div>
</div>
</form>
and use the following CSS:
.flex-wrap{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#login{
float:right; //To mantain the form on the right of the screen
}
Flex box is supported by all modern browsers, but if you need to support
JSFiddle: https://jsfiddle.net/silviagreen/hcktxgva/3/
You can Use this to align your button to the right end.
<input id = "login_button" type="submit" value="Login">
and in css add
#login_button{
float:right;
}
You can use twitter-bootstrap-3 which will help you a lot. Take a look into it.
all you have to do is, add one more span and add float:right to it.
take a look at this. https://jsfiddle.net/adityap708/sedLvLp2/
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<span style="float:right;">
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</span>
</form>
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
You can the use flexbox on the wrapper elements which, really, should be block level and not a spans.
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
#login div {
display: flex;
justify-content: space-between;
}
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password">
</div>
<div>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</div>
</form>
Let's say I have an html snippet like this:
<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>
This isn't my exact code, but the important thing is there's a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?
Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating
It is important to wrap the input field with a span which is display:block. Next thing is that the button has to come first and the the input field second.
Then you can float the button to the right and the input field fills the remaining space.
form {
width: 500px;
overflow: hidden;
background-color: yellow;
}
input {
width: 100%;
}
span {
display: block;
overflow: hidden;
padding-right:10px;
}
button {
float: right;
}
<form method="post">
<button>Search</button>
<span><input type="text" title="Search" /></span>
</form>
A simple fiddle: http://jsfiddle.net/v7YTT/90/
Update 1: If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.
Update 2: This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.
as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell
<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
I suggest using Flexbox:
Be sure to add the proper vendor prefixes though!
form {
width: 400px;
border: 1px solid black;
display: flex;
}
input {
flex: 2;
}
input, label {
margin: 5px;
}
<form method="post">
<label for="myInput">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input"/>
</form>
Please use flexbox for this. You have a container that is going to flex its children into a row. The first child takes its space as needed. The second one flexes to take all the remaining space:
<div style="display:flex;flex-direction:row">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" style="flex:1" />
</div>
Easiest way to achieve this would be :
CSS :
label{ float: left; }
span
{
display: block;
overflow: hidden;
padding-right: 5px;
padding-left: 10px;
}
span > input{ width: 100%; }
HTML :
<fieldset>
<label>label</label><span><input type="text" /></span>
<label>longer label</label><span><input type="text" /></span>
</fieldset>
Looks like : http://jsfiddle.net/JwfRX/
Very easy trick is using a CSS calc formula. All modern browsers, IE9, wide range of mobile browsers should support this.
<div style='white-space:nowrap'>
<span style='display:inline-block;width:80px;font-weight:bold'>
<label for='field1'>Field1</label>
</span>
<input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>
you can try this :
div#panel {
border:solid;
width:500px;
height:300px;
}
div#content {
height:90%;
background-color:#1ea8d1; /*light blue*/
}
div#panel input {
width:100%;
height:10%;
/*make input doesnt overflow inside div*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*make input doesnt overflow inside div*/
}
<div id="panel">
<div id="content"></div>
<input type="text" placeholder="write here..."/>
</div>
The answers given here are a bit outdated. So, here I'm with the easiest solution using modern flexbox.
.input-container{
display:flex;
}
input{
flex-grow: 1;
margin-left: 5px;
}
<div style="width:300px;">
<div class="input-container">
<label for="MyInput">label text: </label>
<input type="text" id="MyInput"/>
</div>
<div class="input-container">
<label for="MyInput2">Long label text: </label>
<input type="text" id="MyInput2" />
</div>
</div>
If you're using Bootstrap 4:
<form class="d-flex">
<label for="myInput" class="align-items-center">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>
Better yet, use what's built into Bootstrap:
<form>
<div class="input-group">
<div class="input-group-prepend">
<label for="myInput" class="input-group-text">Default</label>
</div>
<input type="text" class="form-control" id="myInput">
</div>
</form>
https://jsfiddle.net/nap1ykbr/