I am trying to understand deeply the HTML/CSS behavior, in the following example the birth date input width is shorter than the other inputs.
When I am setting its width to 100%, it gets out the boundaries of the parent div.
What am I doing wrong?
HTML:
<body>
<div class="form">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Country">
<div>
<input type="text" id="birthDate" placeholder="Birth Date">
<span class="dateFormat">YYYY-MM-DD</span>
</div>
</div>
</body>
CSS:
.form input {
margin:5px;
height: 30px;
padding: 5px;
}
.form {
display: grid;
margin: auto;
width: 50%;
grid-template-columns: 1fr 1fr;
}
JSFIDDLE:
https://jsfiddle.net/AlexLavriv/oxmq71sn/
You will have to add styling rule for your input as well. Please use the below code as reference.
.form input {
margin:5px;
height: 30px;
padding: 5px;
}
.form {
display: grid;
margin: auto;
width: 50%;
grid-template-columns: 1fr 1fr;
}
input[type=text]{
width: 100%;
}
<body>
<div class="form">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Country">
<div>
<input type="text" id="birthDate" placeholder="Birth Date">
<span class="dateFormat">YYYY-MM-DD</span>
</div>
</div>
</body>
Hope this help
Related
I have difficulty trying to put the input boxes for a form in the middle of the form, they don't seem to get affected by justify-content and align-items
(This question has been asked before, but I don't use labels, so the answers don't seem to work for me)
.form_exterior{
display: block;
width: 80vw;
height: fit-content;
width: 50vw;
background-color: #d3d3d3;
border: solid 1px;
border-radius: 60px;
margin: 50px auto;
}
.grid_form{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
}
.form_title{
display: flex;
justify-content: center;
}
.section_button_form{
text-align: center;
}
.form_boxes{
display: flex;
text-align: center;
width: 50%;
}
<section>
<article class="form_exterior">
<form class="form_items">
<section class="grid_form">
<h1 class="form_title">Personal Information</h1>
<input class="form_boxes" type="text" name="name" value="Name">
<input class="form_boxes" type="text" name="last name" value="Last name">
<input class="form_boxes" type="text" name="email" value="Email">
<input class="form_boxes" type="text" name="phone number" value="Phone number">
<h1 class="form_title">Shipping information</h1>
<select class="form_boxes" id="country" name="Select country">
<option>select country</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<input class="form_boxes" type="text" name="city" value="City">
<input class="form_boxes" type="text" name="postal code" value="Postal code">
<input class="form_boxes" type="text" name="street" value="Street address">
</select>
<section class="section_button_form">
<button onclick="alertForm()" class="button_form" type="button" name="order_button">order</button>
<button class="button_form" type="button" name="go_back_button">go back</button>
</section>
</form>
</article>
</section>
You can try this, it might save your issue:
.grid_form{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
justify-items : center;
}
I believe your input boxes are block level elements and therefore are referenced to the width of their container.
You can set the width in your input element.
: The Input (Form Input) element
You could also try changing the display attribute on your input box to display: inline-block.
You might need to set a min-width on those elements also.
I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.
form {
margin: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
add text-align: center; to the form tag
form {
margin: auto;
text-align: center;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname">
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com">
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com">
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.
HTML
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<div class="form-center">
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<div class="form-center">
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</div>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
CSS
form {
margin:auto;
}
div.form-center {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
form {
/*margin: auto; Not required as long as you didn't specify the width of the form*/
text-align: center;
}
fieldset {
/*centering the fieldset horizontally*/
margin: 1em auto;
...
}
You may want to use Flexbox.
On the fieldset selector add the following 3 lines of code:
display: flex;
flex-direction: column;
align-items: center;
Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.
Your example would then remain the same, only for the fieldset selector you have the following css properties:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em auto;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.
I have a given HTML which I can't touch:
<fieldset>
<label for="username" class="text">
Dein Benutzername<span class="req">*</span>
</label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">
Vorname<span class="req">*</span>
</label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label ....
and I need to output that one with 2 same-width columns where the label is above the corresponding div-block and the next input-div-block and their corresponding label is besides it.
I added an image to show exactly what I want it to be. I run into problems because the label-tag sits within the same hierarchy-level as the div-block and I therefore can't use inline-block nor - due to my lack of knwoledge - flexbox as it's a mix between column and row in flex-direction
Could somebody please guide me on that one?
You can still use flexbox and put the elements into a new order. It is not a elegant way but the only solution i can
think of if you cant touch the HTML
.text,
.div_text {
width: 50%;
display: block;
}
fieldset {
display: flex;
flex-wrap: wrap;
}
label {
display: block;
}
label[for=username] {
order: 1;;
}
label[for=first_name] {
order: 2;
}
fieldset div:nth-of-type(1){
order: 3;
}
fieldset div:nth-of-type(2){
order: 4;
}
label[for=sur_name] {
order: 5;
}
label[for=example] {
order: 6;
}
fieldset div:nth-of-type(3){
order: 7;
}
fieldset div:nth-of-type(4){
order: 8;
}
<fieldset>
<label for="username" class="text">Dein Benutzername<span class="req">*</span></label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">Vorname<span class="req">*</span></label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label for="sur_name" class="text">Nachname<span class="req">*</span></label>
<div class="div_text">
<input name="sur_name" type="text" id="sur_name" value="" class="textbox" required="">
</div>
<label for="example" class="text">Weiters Beispiel<span class="req">*</span></label>
<div class="div_text">
<input name="example" type="text" id="example" value="" class="textbox" required="">
</div>
</fieldset>
Hoping you are not using any css framework, please have a look at the below-working snippet with custom markup and css, hope it helps :)
body {
font-size: 14px;
font-family: sans-serif;
}
fieldset {
clear: both;
max-width: 500px;
border: 1px dashed deeppink;
}
legend {
color: #fff;
font-size: 14px;
padding: 5px 10px;
background: deeppink;
margin: 0 0 10px 15px;
}
.form-group {
width: 45%;
float: left;
padding: 0 2.5%;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
font-size: 14px;
padding: 5px 3px;
margin-bottom: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
<fieldset>
<legend>Fieldset Container</legend>
<div class="form-group">
<label for="labelX">Label x</label>
<input id="labelX" type="text" placeholder="Label X" />
</div>
<div class="form-group">
<label for="labelY">Label y</label>
<input id="labelY" type="text" placeholder="Label Y" />
</div>
<div class="form-group">
<label for="labelZ">Label z</label>
<input id="labelZ" type="text" placeholder="Label Z" />
</div>
<div class="form-group">
<label for="labelXX">Label xx</label>
<input id="labelXX" type="text" placeholder="Label XX" />
</div>
</fieldset>
I have a simple login/signup page that im making. Both the login and signup parts of the site have issues in that the text mentioning what to write in the textboxes are not aligned with one another. I have tried to change the margins back and forth and no matter how I change it I still have the same problem.
As you can see the Password in the login parn and the City and Email part dont stick to the left as it should. Is there any good way of solving this issue? And also is there any "clean" way of pairing the text with the textbox so that they always align? Below you will find the code I use for this part of the site.
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
As usual, what is a pain to do with classic CSS (float, clear etc) is a breeze with Flexbox :
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: #7fffd4;
padding: 5px;
}
#Sign_Up {
text-align: center;
background-color: #a52a2a;
margin-top: 10px;
padding: 5px;
}
form div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
border: #00f dashed 1px;
margin-bottom: 2px;
}
form div input {
width: 120px;
}
form div select {
width: 124px;
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<br><input type="submit" value="Submit">
</form>
</div>
</div>
You can us tabular forms, they are easy to manage.
form{
background-color:red
}
H1{
text-align:center
}
<!DOCTYPE html>
<html>
<body>
<H1>Hello</H1>
<form>
<table style="width:100%">
<tr>
<td>Email</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="firstname"></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
clear: left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
Addition: I made the form containers 20px wider and therefore the left container 20px narrower to avoid the problem described for Chrome in the comments.
Let's do some cleanup and simplification here.
First off we'll get rid of all those <br> tags. Don't need 'em.
Next we're going to stop with the floats. Float is great for what it's intended for, which is letting text wrap around a floated element. Float is not so great for what it's often used for, which is as a bad replacement for inline-block -- bad because you have to set explicit heights, worry about clears, etc.
#Login_and_Sign_Up {
width: 250px;
margin-left: 10px;
}
#Login {
background-color: aquamarine;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
}
label {
width: 80px; /* adjust to taste */
display:inline-block
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="#">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<input type="submit" value="Submit">
</form>
</div>
</div>
Further improvements that could be made:
For accessibility you should be associating your <label>s with their form elements. Do this either by using the for attribute on the label, or by nesting the form fields inside the label.
Using the label as the wrapper would have the additional advantage of allowing you to omit the wrapper <div>s, by setting label to display:block.
Use CSS Flexbox
I have done it for the login form, you can repeat the same for sign-up as well.
Please wrap your 'label and input select in <p> tags. This will help you eliminate <br/> tags.
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 170px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
.flex-form p{
display:flex;
}
input {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
select {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
label {
flex: 1;
margin: 5px 0 0 0;
float:left;
text-align:left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php" class="flex-form">
<p>
<label>Email</label>
<input type="text" name="email">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
My example looks at utilizing bootstrap .form-group and adding a min-width to the label. Though in hindsight, after reading the flexbox answer - that one is probably easiest for you. I've spent a little time working on this answer so I'll post it anyway.
I also stipped out a lot of unnecessary tags and assigned labels to their elements. There was a lot of br and div which didn't need to be there using this method.
#Login_and_Sign_Up {
height: inherit;
margin-left: 10px;
/* float: right; */
}
#Login {
background-color: aquamarine;
overflow: hidden;
width: 300px;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
width: 300px;
overflow: hidden;
}
label {
min-width: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="firstname">First name</label>
<input type="text" name="fname" id="firstname">
</div>
<div class="form-group">
<label for="familyname">Family name</label>
<input type="text" name="lname" id="familyname">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" name="city" id="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" name="country" id="country">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="repeat">Repeat PSW</label>
<input type="password" name="passwordrepeat" id="repeat">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
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