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.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;
}
.wrapper{
padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper" style="width: 500px; margin: 0 auto; background: #000; color: #fff;">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<?php
if(!empty($login_err)){
echo '<div class="alert alert-danger">' . $login_err . '</div>';
}
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>">
<span class="invalid-feedback"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? Sign up now.</p>
</form>
</div>
</body>
</html>
I need to show my wrapper class at the center of the page. I have researched and find out some methods, but this only centered horizontally and the login form is at top of the page. Can someone show me how to use this code to show my login form at the center of page? I need horizontal and vertical center.
I have changed the css class as well. But no any changes.
I am getting the output as below,
I need to show as below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;
height: 100%;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
width: 500px;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="wrapper" style="">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? Sign up now.</p>
</form>
</div>
</body>
</html>
This should do it. I also removed the inline css. You should avoid this in future. I took the main information from this answer.
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>
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>
This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Closed 2 years ago.
Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form fieldset > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form section > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<section id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</section>
</form>
</body>
</html>
flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).
Remove unnecessary elements, justify-content will take care the things in your case.
make things simpler than making it complicated.
.MainDiv {
display: flex;
width: 100%;
justify-content: space-around;
}
.MainDiv>div {
width: 25%;
text-align: center;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div class="MainDiv">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
I have an HTML form that submits to a Coldfusion action page. For some reason, the form struct does not come through? The 2 files index.cfm and add.cfm are both in the same directory. When I submit the form the test text in the processing page shows, but not the form. I also do not see the form variables in the CF debugger.
What am I missing?
index.cfm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Slideshow Admin</title>
<!--- <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> --->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
h1 {
font-size: 34px;
}
h2 {
font-size: 26px;
}
.yt-container {
padding: 2% 5%;
max-width: 1400px;
margin: 0 auto;
}
.input-short {
max-width: 200px;
}
.input-shorter {
max-width: 100px;
}
.input-med {
max-width: 500px;
}
.input-long {
max-width: 800px;
}
</style>
</head>
<body>
<div class="yt-container">
<h1>Video Slideshow Admin</h1>
<!-- form -->
<h2 class="form-title">Add Video</h2>
<p class="required">* Required</p>
<form name="vidform" action="add.cfm" method="post">
<div class="form-group">
<label for="heading">Heading</label>
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
</div>
<div class="form-group">
<label for="url">Embed URL*</label>
<input type="text" class="form-control input-long" id="url" placeholder="Embed URL" value="" required>
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control input-short" id="status">
<option ng-selected="formData.type == null">Select</option>
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</div>
<div class="form-group">
<label for="order_seq">Order Sequence</label>
<input type="text" class="form-control input-shorter" id="order_seq" placeholder="Order" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
add.cfm
We are here
<cfdump var="#form#">
<cfabort>
Every form input needs a name attribute as well.
This is what Coldfusion is looking for when you post the form.
So:
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
Becomes:
<input type="text" class="form-control input-med" id="heading" name="heading" placeholder="Heading" value="">
This goes the same for <select> and checkbox / radio