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>
Related
Why is display:flex not working in my CSS code? I want to make this part of my HTML code be in center of my page.
body {
margin: 0;
display: flex auto 0 1;
justify-content: center;
height: 100vh;
}
<form class="form" id="form"></form>
<h4 class="score" id="score">score :0</h4>
<h1 id="Question">What is 1 multiply by 1?</h1>
<input type="text" class="input" id="input" placeholder="Enter your answer" autofocus autocomplete="off">
<button type="submit" class="btn">submit</button>
flex auto 0 1 is an invalid property value for display. Your browser's document inspector will show you this. You need to separate those values across the display and flex properties.
I suspect that you also want flex-direction: column, but I'll leave that to you.
body {
margin: 0;
display: flex;
flex: auto 0 1;
justify-content: center;
height: 100vh;
}
<form class="form" id="form"></form>
<h4 class="score" id="score">score :0</h4>
<h1 id="Question">What is 1 multiply by 1?</h1>
<input type="text" class="input" id="input" placeholder="Enter your answer" autofocus autocomplete="off">
<button type="submit" class="btn">submit</button>
the key is to wrap it in a container and make it inline block then using flex to center it :
body {
margin: 0;
display: flex ;
justify-content:center;
align-items:center;
height: 100vh;
}
.container{
display:inline-block;
}
<div class="container">
<form class="form" id="form"></form>
<h4 class="score" id="score">score :0</h4>
<h1 id="Question">What is 1 multiply by 1?</h1>
<input type="text" class="input" id="input"
placeholder="Enter your answer" autofocus autocomplete="off">
<button type="submit" class="btn">submit</button>
</div>
i want to make table content look like as shown in pic:-
but i get content alignment issue as shown in my code.
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div>
<div class="wrapper-class">
<span>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</span>
<span>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</span>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
You can change from span tag to div tag, and display Submit button on the right by display flex as
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
/*
.wrapper-class, .submit{
display: inline-block;
width: 100px;
}
*/
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div class="form">
<div class="wrapper-class">
<div>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</div>
<div>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</div>
</div>
<div>
<input type="submit">
</div>
</div>
</form>
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
I'm trying to design a TV remote control using flexbox (I would use Grid but it is not supported by webkit).
I'm struggling to align/center the items around the "OK" item.
I was thinking to create an "invisible" item but I can't find any such thing on the flexbox specs (empty space seems to be ignored).
I feel that defining "margins" is not exactly the right way to do this.
It should look as below
Up
|
<left----OK---Right-->
|
Down
But it looks like more like this
Up
|
<left----OK---Right-->
|
Down
Here you can play it.
.grid {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.up {
order: 1;
margin-left: 40%;
margin-right: 50%;
}
.left {
order: 2;
margin-left: 30%;
}
.ok {
order: 3;
}
.right {
order: 4;
margin-right: 40%;
}
.down {
order: 5;
margin-left: 40%;
}
<div class="grid">
<form action="/keyboard/" class="up">
<input type="hidden" name="q" value="126" />
<button type submit class="button-large">Up </button>
</form>
<form action="/keyboard/" class="left">
<input type="hidden" name="q" value="123" />
<button type submit class="button-large">Left</button>
</form>
<form action="/keyboard/" class="ok">
<input type="hidden" name="q" value="36" />
<button type submit class="button-large">OK</button>
</form>
<form action="/keyboard/" class="right">
<input type="hidden" name="q" value="124" />
<button type submit class="button-large">Right</button>
</form>
<form action="/keyboard/" class="down">
<input type="hidden" name="q" value="125" />
<button type submit class="button-large">Down;</button>
</form>
</div>
It's actually not too complicated. Just need some adjustments to your CSS. No changes necessary to your HTML.
.grid {
display: inline-flex; /* 1 */
flex-flow: row wrap;
}
.up, .down {
flex: 0 0 100%; /* 2 */
text-align: center; /* 2 */
}
.left, .right {
flex: 1 0 1%; /* 3 */
display: flex;
}
.left { justify-content: flex-end; }
.right { justify-content: flex-start; }
.ok {}
<div class="grid">
<form action="/keyboard/" class="up">
<input type="hidden" name="q" value="126" />
<button type submit class="button-large">Up </button>
</form>
<form action="/keyboard/" class="left">
<input type="hidden" name="q" value="123" />
<button type submit class="button-large">Left</button>
</form>
<form action="/keyboard/" class="ok">
<input type="hidden" name="q" value="36" />
<button type submit class="button-large">OK</button>
</form>
<form action="/keyboard/" class="right">
<input type="hidden" name="q" value="124" />
<button type submit class="button-large">Right</button>
</form>
<form action="/keyboard/" class="down">
<input type="hidden" name="q" value="125" />
<button type submit class="button-large">Down</button>
</form>
</div>
jsFiddle
Notes:
Size container to content size (not width: 100%).
Occupy all space in the row, then center inline content.
Consume all free space in the row (does not apply to "OK", which takes content width only). The flex-basis: 1% is solely for Safari, which doesn't otherwise break .left to the second row as it should.
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>