I need to insert a multi-column which spans over 2 columns.
Since my final form consists of 150+ label/input -pairs and that I would fetch data from array, I need to keep the label and input separated in HTML (as-is in the code).
Question: What is the minimal adjusting in CSS that needs to be done to get existing code to span as multi-column over 2 columns? HTML should stay intact.
.form_content {
display: grid;
grid-auto-rows: auto;
grid-auto-flow: column;
}
.form_content label {
grid-column: 1;
}
.form_content 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>Automated creation of form</title>
</head>
<body>
</body>
</html>
<div class="form_content">
<!-- Labels -->
<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>
<!-- Input fields -->
<input id="1" type="text" name="1" value="-">
<input id="2" type="text" name="2" value="-">
<input id="3" type="text" name="3" value="-">
<input id="4" type="text" name="4" value="-">
<input id="5" type="text" name="5" value="-">
<input id="6" type="text" name="6" value="-">
</div>
Is that you want
.form_content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
}
label {
grid-column: 1;
}
input {
grid-column: 2;
}
label:nth-of-type(n+4) {
grid-column: 3;
}
input:nth-of-type(n+4) {
grid-column: 4;
}
label {
text-align: right;
}
label,
input {
margin: 5px;
}
<div class="form_content">
<!-- Labels -->
<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>
<!-- Input fields -->
<input id="1" type="text" name="1" value="-">
<input id="2" type="text" name="2" value="-">
<input id="3" type="text" name="3" value="-">
<input id="4" type="text" name="4" value="-">
<input id="5" type="text" name="5" value="-">
<input id="6" type="text" name="6" value="-">
</div>
this ?
.form_content {
display: grid;
grid-template-columns: 1fr 2fr ;
grid-auto-rows: auto;
grid-auto-flow: column;
}
label {text-align: right; padding: .5em .3em 0 0; }
label::after {content:' :'}
.form_content label { grid-column: 1; }
.form_content input { grid-column: 2; }
#media screen and (max-height: 20em) {
.form_content { grid-template-columns: 1fr 2fr 1fr 2fr;}
.form_content > label:nth-of-type(n+4) { grid-column: 3; }
.form_content > input:nth-of-type(n+4) { grid-column: 4 }
}
/* first attempt ..
.form_content label:nth-child(odd) { grid-column: 1; }
.form_content input:nth-child(odd) { grid-column: 2; }
.form_content label:nth-child(even) { grid-column: 3; }
.form_content input:nth-child(even) { grid-column: 4; }
*/
<div class="form_content">
<!-- Labels -->
<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>
<!-- Input fields -->
<input id="1" type="text" name="1" value="-1">
<input id="2" type="text" name="2" value="-2">
<input id="3" type="text" name="3" value="-3">
<input id="4" type="text" name="4" value="-4">
<input id="5" type="text" name="5" value="-5">
<input id="6" type="text" name="6" value="-6">
</div>
Related
I'm trying to set up my form so that the text input is on one side, and two buttons take up the rest of the side, one on top and the other on the bottom.
I've tried to use br, but this has not done anything. I'm also doing this on Angular 7.0 if it matters.
HTML
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
CSS
.form {
display: flex;
}
.form input[type='text'] {
flex: 10;
padding: 5px;
height: 40px;
}
.form input[type='submit'] {
flex: 2;
height: 20px;
display: block;
}
.form input[type='reset'] {
flex: 2;
height: 20px;
display: block;
}
Currently, all three are side by side, like this. I want the two buttons to be on top of each other.
If you don't want to change your markup, you can use display: grid.
form {
display: grid;
grid-template-areas: 'form topbutton' 'form bottombutton'
}
input[type="text"] {
grid-area: form;
}
input[type="submit"] {
grid-area: topbutton;
}
input[type="reset"] {
grid-area: bottombutton;
}
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
A more solid solution may use flexbox:
div.row {
display: flex;
width: 100%;
/* you may add height if you need it */
/* height: 125px; */
}
div.row > * {
flex: 1 1 80%;
}
div.row > .buttons {
flex: 1 1 20%;
display: flex;
flex-direction: column;
}
div.row > .buttons > * {
flex: 1 1 auto;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="row">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<div class="buttons">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</div>
</form>
Add display: block to your input elements to have them occupy a new line.
You can also divide the elements into two columns by wrapping the desired elements in <div> classes (in this case of .left and .right), and floating them both to the left.
This can be seen in the following:
.left, .right {
width: 50%;
float: left;
}
.right input {
display: block;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="left">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
</div>
<div class="right">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</form>
I've never used Angular, but I usually use two br afterward with html and it works fine, alternatively you could use css to manually change the location of each element with style and margin (top,left,etc.). ie: like so:
br example:
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input type="submit" value="Submit" class="btn"><br><br>
<input type="reset" value="Reset" class="btn"><br><br>
</form>
css example:
<form class="form" (ngSubmit)="onSubmit()">
<input style=margin-top:90px type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input style=margin-top:100px type="submit" value="Submit" class="btn"><br><br>
<input style=margin-top:110px type="reset" value="Reset" class="btn"><br><br>
</form>
A picture is needed here.
I have a 9 grid defined using CSS grid like this...
.App {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "1 2 3" "4 5 6" "7 8 9";
}
In the 2, 4, 6 and 8 grid-areas I've got a number of input elements. They stretch to fit their parent element using flexbox like this ...
.ItemsSection {
display: flex;
flex-direction: column;
}
.ItemsSection * {
flex: 1;
font-size: 100%;
}
You can see from the image that I've tried to rotate the 4 grid-area. It didn't work. I'm not surprised about that but I'm struggling to think how I would achieve that layout without a lot of pain.
What I need is for the inputs to be transformed by 90 degrees and then fitted to the parent element so that they are sideways on but sized to the mid-blue area.
Honestly, I'm not even sure what to google for that!
I'm really looking for a CSS only solution but beggars can't be choosers.
EDIT: Code snippet added as requested
.app {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a b c" "d e f" "g h i";
}
.ItemSection {
display: flex;
flex-direction: column;
padding:10px;
}
.ItemSection * {
flex: 1;
font-size: 100%;
text-align: center;
}
.one {
background-color: #999;
grid-area: a;
}
.two {
background-color: #666;
grid-area: b;
}
.three {
background-color: #999;
grid-area: c;
}
.four {
background-color: #666;
grid-area: d;
}
.five {
background-color: #999;
grid-area: e;
}
.six {
background-color: #666;
grid-area: f;
}
.seven {
background-color: #999;
grid-area: g;
}
.eight {
background-color: #666;
grid-area: h;
}
.nine {
background-color: #999;
grid-area: i;
}
<div class="app">
<div class="ItemSection one">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection two">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection three">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection four">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection five">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection six">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection seven">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection eight">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection nine">
<input />
<input />
<input />
<input />
</div>
</div>
Thanks in advance.
Despite my comment to your question with a working solution (albeit it'll only work in a certain layout), I believe you can solve your issue with writing-mode: sideways-lr; (and maybe prefixes?) but you might want to tweak how your inputs are sized.
.app {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a b c" "d e f" "g h i";
}
.ItemSection {
display: flex;
flex-direction: column;
padding: 10px;
}
.ItemSection * {
flex: 1;
font-size: 100%;
text-align: center;
}
.one {
grid-area: a;
}
.two {
grid-area: b;
}
.three {
grid-area: c;
}
.four {
grid-area: d;
}
.five {
grid-area: e;
}
.six {
grid-area: f;
}
.seven {
grid-area: g;
}
.eight {
grid-area: h;
}
.nine {
grid-area: i;
}
.one,
.three,
.five,
.seven,
.nine {
background-color: #999;
}
.two,
.four,
.six,
.eight {
background-color: #666;
-webkit-writing-mode: sideways-lr;
-ms-writing-mode: sideways-lr;
writing-mode: sideways-lr;
}
<div class="app">
<div class="ItemSection one">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection two">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection three">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection four">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection five">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection six">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection seven">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection eight">
<input />
<input />
<input />
<input />
</div>
<div class="ItemSection nine">
<input />
<input />
<input />
<input />
</div>
</div>
How to put form labels inside a input form only on mobile?
example:
my code:
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Something like this? I changed the position of input and label in the HTML
.form-group {
position: relative;
min-height: 3.5em;
}
input.form-control {
height: 3em;
position: absolute;
top: 0;
left: 0;
}
label.form-control-label {
position: absolute;
font-size: .8em;
top: 0;
left: 5px;
text-transform: uppercase;
}
<form>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
<label class="form-control-label" for="firstName">Firstname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
<label class="form-control-label" for="lastName">Lastname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
<label class="form-control-label" for="phone_number">Mobile Number</label>
</div>
</form>
You can use like the below method. We have to write mobile screen style with in the media queries
body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}
#media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;
}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>
I've just added a border to form-group and overwritten some bootstrap code.
For mobile only, try to use CSS3 Media Queries.
You could try this:
.form-group {
border: 1px solid black; /* Change border width and color here */
}
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
border: none !important; /* No border for input */
box-shadow: none !important; /* No border for input */
}
.form-control:focus {
box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Inspired by another answer, here is a short way to do it:
.input-group {
position: relative;
}
.input-label {
position: absolute;
top: 5px;
left: 5px;
color: #666;
}
.input-element {
padding: 30px 5px 5px 5px;
}
<div class="input-group">
<label class="input-label">First name</label>
<input type="text" class="input-element" />
</div>
I want to align some check boxes with labels such that the check boxes are in a vertical row to the right side and the labels are aligned with the starting edges in a vertical row on the left side.
.row {
display: flex;
}
.row label { flex: 1; max-width: 25%; }
<div class="container">
<div class="row">
<label>Label</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 2</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 3</label><input type="checkbox" />
</div>
</div>
I believe this is what you're looking for:
label {
display: inline-block;
padding-left: 15px;
}
<form>
<div>
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
</div>
<form>
Working Example: JSFiddle
Css File:
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}
HTML File:
<div class="container">
<div class="row text-center">
<br>
<br>
<h1>Badgebox: CSS only checkbox badge!</h1>
<h2>Works on Bootstrap 2.3.2 and up</h2>
<br>
<label for="default" class="btn btn-default">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">✓</span></label>
<label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">✓</span></label>
<label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">✓</span></label>
<label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">✓</span></label>
<label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">✓</span></label>
<label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">✓</span></label>
</div>
</div>
Or
Refer this Link:
https://bootsnipp.com/snippets/featured/badgebox-css-checkbox-badge
Looking for an example of checkbox with (centered) label on top of it:
IamALabel
[ ]
I'm using (ASP.NET) MVC 5 if that matters.
I tried couple of simple things but it wouldn't center it:
<div>
<label for="checkbox1"><span></span>IamALabel</label>
<br/>
<input id="checkbox1" type="checkbox" name="checkbox" value="IamALabel" checked="checked">
</div>
and also:
<div>
<label for="checkbox1" style="display: inline-block; text-align:center"><span></span>IamALabel</label>
<br/>
<input id="checkbox1" type="checkbox" name="checkbox" value="IamALabel" checked="checked">
</div>
You can use display: table technique:
div {
display: table;
float: left;
margin-right: 15px;
}
label {
display: table-row;
}
#chk {
display: table-row;
width: 100%;
}
<div>
<label for="male">IamALabel</label>
<input type="checkbox" id="chk" />
</div>
<div>
<label for="male">IamALabel</label>
<input type="checkbox" id="chk" />
</div>
<div>
<label for="male">IamALabel</label>
<input type="checkbox" id="chk" />
</div>
EDIT
For adding multiple label/checkbox near each other add float: left in div element.