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>
Related
I want to style Forget Password element so that it appears in the right side. This is possible with width set to 100% but I'm also observing that the empty space before the text is also carrying the link property. I tried using width as 50%, but this pushes the text back to the left side. How can I achieve what I want?
#forgotP {
color: blue;
text-decoration: none;
display: block;
width: 50%;
text-align: right;
font-size: 12px;
font-weight: 300;
}
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
You can use CSS flexbox to get it done.
.box {
width: max-content;
}
p {
display: flex;
justify-content: flex-end;
}
#forgotP {
color: blue;
text-decoration: none;
font-size: 12px;
font-weight: 300;
}
<body>
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
</body>
EDIT
add CSS code
p {
display: flex;
justify-content: flex-end;
}
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>
I am trying to get a form's inputs to fill the container width but since I am using two flexboxes, it doesn't seem to allow me to set the width of the input boxes. Is there a way around this? I've tried using flex-shrink but got the same result.
What is the best way to set a form's width to fill its container using flexbox?
.sd-form-group {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
}
.sd-form-wrap {
display: flex;
}
.sd-form-group input[type=text],
.sd-form-group textarea {
width: 100%;
}
<form>
<div class="sd-form-group">
<div class="sd-form-wrap">
<div class="form-name form-first-name">
<label>First Name</label>
<br>
<input type="text">
</div>
<div class="form-name form-last-name">
<label>Last Name</label>
<br>
<input type="text">
</div>
</div>
<div class="form-email">
<label>Email</label>
<br>
<input type="text">
</div>
<div class="form-message">
<label>Message</label>
<br>
<textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
</div>
<div class="form-checkbox">
<input type="checkbox">
<label>
Communications box
</label>
</div>
<input type="submit" value="Submit">
</div>
</form>
On the container, instead of flex-flow: column nowrap use row wrap.
On the items, force each one to occupy the full width of the row.
.sd-form-group {
display: flex;
/* flex-flow: column nowrap; */
flex-wrap: wrap; /* new */
justify-content: center;
/* align-items: flex-start; */ /* does nothing */
}
.sd-form-group > div {
flex: 0 0 100%; /* new */
}
.sd-form-wrap {
display: flex;
}
.sd-form-group input[type=text],
.sd-form-group textarea {
width: 100%;
}
<form>
<div class="sd-form-group">
<div class="sd-form-wrap">
<div class="form-name form-first-name">
<label>First Name</label>
<br>
<input type="text">
</div>
<div class="form-name form-last-name">
<label>Last Name</label>
<br>
<input type="text">
</div>
</div>
<div class="form-email">
<label>Email</label>
<br>
<input type="text">
</div>
<div class="form-message">
<label>Message</label>
<br>
<textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
</div>
<div class="form-checkbox">
<input type="checkbox">
<label>
Communications box
</label>
</div>
<input type="submit" value="Submit">
</div>
</form>
I have a form inside a div inside. The div is inside another div.
<div class="div__signup"> <!-- takes the complete width/height of content section -->
<div class="content_div--white"> <!-- contains the form. Adjust this div to create a border around the form -->
<form class="signup-form" actions="">
<label for="firstname" class="first-name">First Name</label>
<input id="firstname" type="text">
<label for="lastname" class="last-name">Last Name</label>
<input id="lastname" type="text">
<label for="email" class="email"> Email</label>
<input id="email" type="email">
<label for="password" class="password">Password</label>
<input id="password" type="password">
<label for="verify-password" class="verify-password">Verify Password</label>
<input id="verify-password" type="password">
</form>
</div>
</div>
This html is inside a css-grid which has 3 rows - navigation, content and footer.
.css-grid-container{
height:100vh; /*???*/
display: grid;
grid-gap:20px;
grid-template-columns: 1fr; /* 1 columns*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row (content) is 15 times larger than the 3rd row (footer).*/
}
I want the html of the form page to be at the center of the content section of the css-grid. If I use flexbox, I suppose I have to provide specific height for the flexbox. The only height parameter I know is 100vh which equals height of the viewport.
.div__signup{
display:flex;
align-items: center;
justify-content: center;
height: 100vh; /*need something else than 100vh as I dont want alignment w.r.t viewport */
}
But I want the form to be at the center of the content section of the grid, not the center of the viewport. How could I align the form to the center of the content section?
Based on the fact that .div__signup is a child of a grid item, here are two suggestions:
Using absolute position
.css-grid-item {
position: relative;
}
.div__signup {
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
Make the grid item a flex container
.css-grid-item {
display: flex;
align-items: center;
justify-content: center;
}
Do note, sample 2 may, or may not work, based on how the justify-content/align-items is set on the css-grid-item.
Assumed HTML
<div class="css-grid-item">
<div class="div__signup"> <!-- takes the complete width/height of content section -->
<div class="content_div--white"> <!-- contains the form. Adjust this div to create a border around the form -->
<form class="signup-form" actions="">
<label for="firstname" class="first-name">First Name</label>
<input id="firstname" type="text">
<label for="lastname" class="last-name">Last Name</label>
<input id="lastname" type="text">
<label for="email" class="email"> Email</label>
<input id="email" type="email">
<label for="password" class="password">Password</label>
<input id="password" type="password">
<label for="verify-password" class="verify-password">Verify Password</label>
<input id="verify-password" type="password">
</form>
</div>
</div>
</div>
See this I use display fixed, table and table cell
.seline-preloader {
position: fixed;
left: 0px;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: #ffffff;
display: block;
box-sizing: border-box;
}
.table {
display: table;
width: 100%;
height: 100%;
background-color: transparent !important;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table-cell {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
<section class="seline-preloader">
<div class="table">
<div class="table-cell">
<h2 class="hide">Form</h2>
<!--start of your code-->
<div class="div__signup">
<!-- takes the complete width/height of content section -->
<div class="content_div--white">
<!-- contains the form. Adjust this div to create a border around the form -->
<form class="signup-form" actions="">
<label for="firstname" class="first-name">First Name</label>
<input id="firstname" type="text">
<label for="lastname" class="last-name">Last Name</label>
<input id="lastname" type="text">
<label for="email" class="email"> Email</label>
<input id="email" type="email">
<label for="password" class="password">Password</label>
<input id="password" type="password">
<label for="verify-password" class="verify-password">Verify Password</label>
<input id="verify-password" type="password">
</form>
</div>
</div>
<!--end of your code-->
</div>
</div>
</section>
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.