Due to need of creating 350+ pair of label/input, I would like to have the label and input grouped separately in HTML. The solution I have with CSS grid "container-1" works fine when the label and input comes in pairs.
Update: The second reason I would like to keep label/input separately is because I will later use a for-loop and inject data from imported array.
Question: How can I make "container-2" result in same output as "container-1" with no changes of HTML and minimal adjustment of CSS ?
I want to stick to CSS grid.
.container_1 {
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<label for="dummy2">longer title for dummy2:</label>
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<input id="dummy2" name="dummy2" value="dummy2">
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>
Here you go. Changed grid-auto-flow of the second container to change the direction. No changes in HTML.
Althought here you have to determine grid-column of label and input.
.container_1 {
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
grid-auto-rows: auto;
grid-auto-flow: column;
}
.container_2 label {
grid-column: 1;
}
.container_2 input {
grid-column: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<label for="dummy2">longer title for dummy2:</label>
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<input id="dummy2" name="dummy2" value="dummy2">
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>
.container_1 {/* Your HTML for bottom and top just needs to be the same*/
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 months ago.
I have this code:
#login-form {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/loginStyle.css">
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
And my div is only centered horizontaly, but not verticaly, why is my div not centered verticaly too?
flexbox doesn't have any height which means that it cannot center the form vertically. To center the form, you need to give the html, body and the #login-form a height 100% as shown in the snippet below.
html,
body {
height: 100%;
}
#login-form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br />
<input
type="text"
id="login-field"
name="login"
placeholder="Digite seu login aqui"
/>
<br />
<label for="senha">Senha</label>
<br />
<input
type="password"
id="senha-field"
name="senha"
placeholder="Digite sua senha aqui"
/>
<br />
<button type="submit" id="botao-entrar" onclick="entrar()">
Entrar
</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
I hope this helps
It's actually centered vertically inside the login-form. The thing is that the login-form's height is equal to its content. You could overwrite that height through CSS, like this:
body{
margin:0;
}
#login-form {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh; /* line I added */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/loginStyle.css">
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
I want to span the login submit button in the above code in two columns and it is not working properly. I tried it many times but its still not working. can anyone provide a correct way to do this
form {
display: grid;
grid-template-columns: repeat(2, 10vw);
}
#submit {
column-span: all;
}
<!DOCTYPE html>
<html>
<head>
<title>Assignment 1</title>
</head>
<body>
<h2>Login / Sign-In</h2>
<form>
<label for="uname">Username: <sup>*</sup> </label>
<input type="text" name="uname" id="uname">
<label for="passwd">Password: <sup>*</sup> </label>
<input type="password" name="passwd" id="passwd">
<button type="submit" id="submit">Login</button>
</form>
</body>
</html>
Use the grid-column property:
<!DOCTYPE html>
<html>
<head>
<style>
form {
display: grid;
grid-template-columns: repeat(2, 10vw);
}
#submit {
grid-column: 1 / span 2;
}
</style>
<title>Assignment 1</title>
</head>
<body>
<h2>Login / Sign-In</h2>
<form>
<label for="uname">Username: <sup>*</sup> </label>
<input type="text" name="uname" id="uname">
<label for="passwd">Password: <sup>*</sup> </label>
<input type="password" name="passwd" id="passwd">
<button type="submit" id="submit" >Login</button>
</form>
</body>
</html>
Instead of using grid-template-columns: repeat(2, 10vw);, you can achieve with your CSS if you use column-count: 2;
form {
display: grid;
column-count: 2;
width: 30%;
}
button {
column-span: all;
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Assignment 1</title>
</head>
<body>
<h2>Login / Sign-In</h2>
<form>
<label for="uname">Username: <sup>*</sup> </label>
<input type="text" name="uname" id="uname">
<label for="passwd">Password: <sup>*</sup> </label>
<input type="password" name="passwd" id="passwd">
<button type="submit" id="submit">Login</button>
</form>
</body>
</html>
I need to create +150 value/pair forms.
Question: How can I secure that when the left div is filled to its height, that the rest of the data continous from the right div ?
.wrapper {
display: grid;
grid-template:
"form" 800px
/ 1fr;
}
.form {
display: grid;
grid-template:
"table_area_1 table_area_2" 200px
/ 1fr 1fr;
}
.table_area_1 {
display: grid;
grid-auto-rows: 30px;
grid-template-columns: 1fr 100px;
grid-auto-flow: column;
}
.table_area_1 {
margin: 0 10px 0 10px;
background-color: pink;
}
.table_area_2 {
grid-area: table_area_2;
background-color: lightblue;
}
.titles {
background-color: lightgrey;
padding: 5px 0 0 5px;
width: 125%;
}
.table_area_1 label {
grid-column: 1;
}
.table_area_2 input {
grid-column: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="form">
<div class="table_area_1">
<label for="1">Label-1</label>
<label for="2">Label-2</label>
<label for="3">Label-3</label>
<label for="4">Label-4</label>
<label for="5">Label-5</label>
<label for="6">Label-6</label>
<label for="7">Label-7</label>
<label for="8">Label-8</label>
<label for="9">Label-9</label>
<label for="10">Label-10</label>
<input id="1" type="text">
<input id="2" type="text">
<input id="3" type="text">
<input id="4" type="text">
<input id="5" type="text">
<input id="6" type="text">
<input id="7" type="text">
<input id="8" type="text">
<input id="9" type="text">
<input id="10" type="text">
</div>
<div class="table_area_2"></div>
</div>
</div>
</body>
</html>
Here is example of CSS Multi Columns. I sagest you not to use display: grid; for every block, like in your example. Anyway, look at the solution.
.form {
column-count: 2;
column-fill: auto;
/* just for instance */
height: 100px;
background: pink;
}
.form label {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="form">
<label for="1">
<span>Label-1</span>
<input id="1" type="text">
</label>
<label for="2">
<span>Label-2</span>
<input id="2" type="text">
</label>
<label for="3">
<span>Label-3</span>
<input id="3" type="text">
</label>
<label for="4">
<span>Label-4</span>
<input id="4" type="text">
</label>
<label for="5">
<span>Label-5</span>
<input id="5" type="text">
</label>
<label for="6">
<span>Label-6</span>
<input id="6" type="text">
</label>
</div>
</body>
</html>
I remember your previous question, and although remember of two separate loops in PHP for labels and fields. Don't now much about you back-end, but can suggest you a loop-in-a-loop solution example.
<?php $i = 1;
foreach ($labels as $label) { ?>
<label for="<?php echo $i; ?>">
<span>Label-<?php echo $i; ?></span>
<?php $j = 1;
foreach ($inputs as $input) { ?>
<?php if ($j == $i) { ?>
<input id="<?php echo $j; ?>" type="text">
<?php } ?>
<?php $j++; } ?>
</label>
<?php $i++; } ?>
Here we have $i as an index for the loop of labels and $j as an index for a loop of inputs. If $j == $i in the inner loop - we shows the input inside a loop of labels. Hope this code is pretty readable. If not - show your PHP code of both loops and I will adapt it for your purpose.
I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="functions.js"></script>
<script src="main.js"></script>
</body>
</html>
Thank you!
This is what you need. display: block
Just use CSS property display: block to show labels on top of your element and on left side as you wanted.
Just run snippet to see it in action.
label {
display:block;
}
button {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
</body>
</html>
Hope this help.
So I have this HTML file and it's giving me two validation errors and I have no idea how to fix it, I think it's because the style is out of scope but I have no idea where to place it, been playing around with it for a good hour or so now.
As you can see below I added a picture showing the validation errors using this website https://validator.w3.org/nu/#file
is this a scope issue or what is going on here?
And if I add it in the I get this
<!DOCTYPE html>
<html>
<head>
<title>ComputerFix</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<style>
main {
display:flex; width: 100%;
align-items:center;
justify-content:center;
}
label {
display:block;
}
</style>
<body class="StandardBackground">
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Information</li>
<li>Contact</li>
<li>Download</li>
</ul>
</div>
<main>
<form>
<fieldset>
<legend>Kontakta oss</legend>
<div>
<label for='name'>Name:</label>
<input type="text" name='name'>
</div>
<div>
<label for='email'>Email:</label>
<input type="email" name='email'>
</div>
<div>
<label for='phone'>Telefonnummer:</label>
<input type="text" name='phone'>
</div>
<div>
<label for='meddelande'>Meddelande:</label>
<textarea name='meddelande'></textarea>
</div>
<div>
<input type='submit'>
</div>
</fieldset>
</form>
</main>
</body>
</html>
A <style> element must appear inside the <head> element. You have put it between the <head> and <body> elements where nothing is allowed.
The for attribute of a <label> needs to reference the id of the associated form control, not the name. (Multiple elements can share a name, which makes it unsuitable for associating anything with a particular element).
Placement of <style> should be in the <head> and the form inputs should be using ids, not names in order to validate.
<!DOCTYPE html>
<html>
<head>
<title>ComputerFix</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
main {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
label {
display: block;
}
</style>
</head>
<body class="StandardBackground">
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Information</li>
<li>Contact</li>
<li>Download</li>
</ul>
</div>
<main>
<form>
<fieldset>
<legend>Kontakta oss</legend>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="phone">Telefonnummer:</label>
<input type="text" name="phone" id="phone">
</div>
<div>
<label for="meddelande">Meddelande:</label>
<textarea name="meddelande" id="meddelande"></textarea>
</div>
<div>
<input type="submit">
</div>
</fieldset>
</form>
</main>
</body>
</html>
The for in your label refers to the id of the desired element:
<div>
<label for='name'>Name:</label>
<input type="text" name='name' id='name'>
</div>
Check it out here: https://www.w3schools.com/tags/tag_label.asp
As already pointed out, make 2 corrections to your code :
1.) Put the Style tags between the head opening and closing tags. This is a strict criteria for internal CSS.
2.) The for attribute used by you in the form uses the value of "id" and not "name". So put another attribute in the input tag id="name" OR id="email" or whatever.