I have this html code:
<form>
<div class="form-group">
<label>Label1</label>
<input/>
</div>
<div class="form-group">
<label>Longer label 2</label>
<textarea>Some text</textarea>
</div>
</form>
How can I display this in a nice grid without setting a fixed width for the labels and without changing the html code?
The result should look like this:
Label1 Input
Longer label 2 TextArea
CSS-Tables
.form-group {
display: table-row;
padding-bottom: 1em;
}
label {
display: table-cell;
vertical-align: top;
padding: 0 .5em .5em
}
<form>
<div class="form-group">
<label>Label1</label>
<input/>
</div>
<div class="form-group">
<label>Longer label 2</label>
<textarea>Some text</textarea>
</div>
</form>
Flexbox is your best friend. Bootstrap grids are based on them too.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<form style="display:flex; flex-wrap: wrap;">
<div class="form-group">
</div>
<div class="form-group">
</div>
</form>
you can then style your form-group according to your needs like flex-grow flex-order...
You should use bootstrap for this. It will be very helpful creating this kind of layout.
Related
How can one display multiple form input-groups inline with Bootstrap 5?
Tried this, but input group components show on top of each other:
<div class="container">
Your username is
<div class="input-group form-control-inline">
<span class="input-group-text">#</span>
<input type="text" class="form-control " placeholder="Username">
</div>
and your email <is></is>
<div class="input-group form-control-inline">
<input type="text" class="form-control form-control-inline" placeholder="">
<span class="input-group-text">#example.com</span>
</div>
</div>
.form-control-inline {
display: inline-block;
width: auto;
vertical-align: middle;
margin-top: -8px;
}
.form-control-inline.form-control, .form-control-inline.input-group-text {
display: inline-block;
}
Fiddle: https://jsfiddle.net/46se871g/
I used flex to help me achieve what you need. as flex gives more controls from the parent to the entire child for your HTML. read more details for flex.
Also, I moved the text into the .input-group class to have every div with all of it's content.
HTML:
<div class="container">
<div class="input-group">
Your username is
<span class="input-group-text">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
and your email <is></is>
<input type="text" class="form-control form-control-inline"
placeholder="">
<span class="input-group-text">#example.com</span>
</div>
</div>
CSS:
.input-group {
display: flex;
align-items: center
}
.container {
display: flex;
grid-template-columns: repeat(1, 1fr);
align-items: center;
}
I have set my default font size to be based on 10px via 62.5%, and then set the body to be 1.4rem. This seems to cause issues with the custom checkbox controls and they no longer align correctly.
I'm using Bootstrap 4's SASS files combined with my own. Is there something in the variables file that I'm missing to fix this? Or maybe some overrides I need to do? I've tried messing with various padding, margins, font sizes, etc. but the way they have this working isn't obvious.
Here is what I have set for the default font sizes for the site:
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
And here is the HTML
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
JSFiddle
To sum up, basically I need the ability to change the body font size and yet still have the checkbox to still work correctly and be the same height as the input fields when they are next to each other.
You can make the parent element flex and use align-items to center vertically. You would also need to use non-absolute position on the checkbox element. That will keep them centered vertically regardless the font size of the page.
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
.custom-control {
display: flex;
align-items: baseline;
}
.custom-control-indicator {
position: static;
margin: 0 .5rem 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
You could also use top: 50%; transform: translateY(-50%); to center the checkbox vertically, then set the line-height of the text to 1 so it doesn't affect vertical alignment.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
.custom-control-indicator {
top: 50%;
transform: translateY(-50%);
}
.custom-control-description {
line-height: 1;
}
</style>
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
A simple solution would be to change the styles for the checkbox:
.custom-control-indicator {
height: 1.4rem;
width: 1.4rem;
top: calc(1.4rem * 0.25);
}
Change the 1.4rem as required to the same size as the body font-size (you can also set this up to work automatically using SASS variables
I have html like
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
#Html.Kendo().NumericTextBoxFor(m => m.Min).Decimals(2);
#Html.Kendo().NumericTextBoxFor(m => m.Max).Decimals(2);
</div>
</div>
</div>
</div>
Kendo's numeric text box has .k-numerictextbox class. and i have CSS
.form-group .k-numerictextbox {
width: 100% !important;
}
with this settings currently CSS is getting applied to NumericTextBox.
I dont want CSS to apply on NumericTextBox if its under form-inline class
For this specific html structure (there is always one element between .k-numerictextbox and .form-group which either is or not .form-inline) then
.form-group *:not(.form-inline) .k-numerictextbox {
width:100%;
}
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-not-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
(keep in mind that it is a fragile rule, because if there is yet another container of the .k-numerictextbox inside the .form-group it will not work)
I would remove using !important since it's probably not needed. Add another rule with more specificity (including the .form-inline would be a good way to do this:
.form-group .k-numerictextbox {
width: 100%;
}
.form-group .form-inline .k-numerictextbox {
width: auto;
}
Trying to create a layout that has two columns, and text between those columns
Something like this:
But I am running into spacing issues with twitter bootstrap to make it actually work. On top of making these items the same width with the text between, they should all be vertically aligned.
You can do that using 3 columns
Live Demo jsfiddle
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">.col-sm-6</div>
<div class="col-xs-6">.col-sm-6</div>
</div>
<br/>
<p>Create an account...............................</p>
<div class="row">
<div class="col-xs-6 test" >
<form class="form-horizontal vmid" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"/>
</div>
</div></form>
</div>
<div class="col-xs-1 test" >
<p class="asd"> ~OR~</p>
</div>
<div class="col-xs-5 test" >
<button type="submit" class="asd btn-primary btn-lg">Facebook</button>
</div>
</div>
</div>
Style
.vmid{
position:relative;
top:50%;
transform:translateY(-50%);
}
.asd{
position:relative;
top:50%;
transform:translateY(-35%);
}
This is not a bootstrap answer just a plain simple CSS one. Although you can adapt it to bootstrap easily because the basic underlying principle is the same. Instead of using width percentages that I have used in my example, bootstrap grid system columns can be used instead. Saying all that, you can achieve your desired effect by dividing the wrapper div into 3 columns and then using the display table for parent and table-cell and vertical align middle for the child to place the respective input elements and button elements in its place as needed.
The fiddle can be found here
The code snippet follows...
.wrapper {
height: 300px;
width: 100%;
background: pink;
}
.leftSide,
.rightSide,
.midPart {
box-sizing: border-box;
height: 100%;
display: table;
}
.leftSide {
width: 45%;
background: lightgray;
float: left;
}
.midPart {
width: 10%;
background: aqua;
}
.midPart p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.leftSide div,
.rightSide div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rightSide {
width: 45%;
background: lightcyan;
float: right;
}
button {
height: 3em;
width: 100px;
background: blue;
color: white;
}
<div class="wrapper">
<div class="leftSide">
<div>
<input placeholder="Enter Username" />
<br/>
<br/>
<input placeholder="Enter password" />
</div>
</div>
<div class="rightSide">
<div>
<button>Hello</button>
</div>
</div>
<div class="midPart">
<p>-or-</p>
</div>
</div>
Hope this helps. Happy coding :)
Update::
***Another updated Fiddle without colors***
I am trying to center the content to center in bootstrap, i searched and found solution, which is not working for me, could someone help me out here,
<style>
.center{
margin:0 auto;
}
</style>
<div class="center">
<form method="post" action="" enctype="multipart/form-data">
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
<label for="name">Book Name</label>
<input type="text" name="name" class="form-control" id="name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
<label for="author_id">Author</label>
<select name="author_id" class="form-control" id="author_id">
<option value="author_id">Author</option>
</select>
</div>
</div>
</form>
</div>
In order for the .center div to be centered with margin: 0 auto; it also needs to have a set width value. By default, a div takes 100% of it's containers width. If the div is 100% wide, it can not be centered as it is in a way technically already centered. You could give .center a width to fix this...
.center {
width: 400px;
margin:0 auto;
}
You may not want a fixed width though, in-fact I'd say you definitely dont want that considering you are using a responsive template...
The better solution is to center the content, rather than the div container.
Try adding text-align: center; to the form-group class, or make your own class with text-align: center; and add the class to the HTML div's that group your labels/inputs.
.form-group {
text-align: center;
}