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
Related
div input:not(:first-of-type){
display: block;
}
#left_side{
width: 40%
}
label{
width:15em;
display: inline-block;
vertical-align: top;
}
input{
width: 23em;
border-style:solid;
border:1px solid black;
}
.group div{
margin-bottom: -1px;
}
.group input {
margin-bottom: -1px;
box-shadow: none;
background-color: antiquewhite;
}
.get{
width:23em;
display: inline-block;
}
<div class="group">
<div>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" class="get">
</div>
<div>
<label for="last_name">First Name:</label>
<input type="text" id="last_name" class="get">
</div>
</div>
<!--Here is some code with grouped boxes:-->
<div>
<label for="address_1_ln_1">Address 1:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_1_ln_2">
</div>
</div>
<div>
<label for="address_2_ln_1">Address 2:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_2_ln_2">
</div>
</div>
<div>
<label for="city">City:</label>
<input type="text" id="city" class="get">
</div>
<div>
<label for="state">State:</label>
<input type="text" id="state" class="get">
</div>
<dive>
<label for="zip">Zip:</label>
<input type="text" id="zip" class="get">
</dive>
How do you make text input of forms overlap borders like border: collapse on a table? By default stacking them one on top of the other has them develop a 2px border between adjacent inputs. Ideally both the borders should merge.
You could do
input {
margin-bottom: -1px;
}
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
So the normal behavior of the input-group controls of bootstrap is horizontal stacking within the 100% of the container. What I'd like to do is stack them on top of each other so instead of having this:
I'll have this:
(If you wonder, the vertical image is done by paint :))
So far I have tried
<div class="input-group">
<span class="input-group-addon">One</span>
<select class="form-control"><option>1</option></select>
</div>
<div class="input-group">
<span class="input-group-addon">One</span>
<select class="form-control"><option>1</option></select>
</div>
And this (which I don't think is supported by bootstrap)
<div class="input-group">
<div class="input-group">
<span class="input-group-addon">One</span>
<select class="form-control"><option>1</option></select>
</div>
<div class="input-group">
<span class="input-group-addon">One</span>
<select class="form-control"><option>1</option></select>
</div>
</div>
As you can see, it's stacked as I want it to be - only that it is very small (not spanned over 100% of the container) AND the joined part has border-radius.
Must I tamper with/override the css styles of the input-group to achieve my goal is there any other preferred/supported way?
I just used this with Bootstrap 4. I added an additional CSS rule in order to remove the thick border between input fields.
.vertical-input-group .input-group:first-child {
padding-bottom: 0;
}
.vertical-input-group .input-group:first-child * {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.vertical-input-group .input-group:last-child {
padding-top: 0;
}
.vertical-input-group .input-group:last-child * {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) {
padding-top: 0;
padding-bottom: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) * {
border-radius: 0;
}
.vertical-input-group .input-group:not(:first-child) * {
border-top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-input-group">
<div class="input-group">
<input type="text" class="form-control" id="sao" placeholder="Attention Of">
</div>
<div class="input-group">
<input type="text" class="form-control" id="ad1" placeholder="Line 1">
</div>
<div class="input-group">
<input type="text" class="form-control" id="ad2" placeholder="Line 2">
</div>
<div class="input-group">
<input type="text" class="form-control" id="ad3" placeholder="Line 3">
</div>
<div class="input-group">
<input type="text" class="form-control" id="ad4" placeholder="Line 4">
</div>
<div class="input-group">
<input type="text" class="form-control" id="ad5" placeholder="City">
</div>
<div class="input-group">
<input type="text" class="form-control" id="county" placeholder="County">
</div>
<div class="input-group">
<input type="text" class="form-control" id="postalcode" placeholder="Postal Code">
</div>
</div>
Vertical Aligned with thin border
When I attempt to apply a maximum width to an input field, it positions the secondary button as if the input field didn't have a maximum width.
JSFiddle Example
HTML:
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
</div>
CSS:
.datefield {
max-width: 100px;
}
Result:
How can I get the secondary button to correctly sit next to the text field?
Try using display:inline-block;
https://jsfiddle.net/ex3ntia/DTcHh/22030/
.input-group-btn {display:inline-block;}
Bootstrap is laid out by using a grid system. You will need to adjust your design layout to accomplish what you are looking to achieve.
What is happening now is all you are doing is shrinking down the size of the input box, but not the actual grid cell.
try adjusting just the cell or placing the form-group elements within a cell then within a targeting element you can shrink.
Try this,
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding: 10px;
}
.shrink {
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="form-group">
<div class="shrink">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div><!-- .input-group -->
</div><!-- .shrink -->
</div><!-- .form-group -->
</div><!-- .row -->
</div> <!-- .container -->
Hope that helps!
The span was not being displayed inline. I assume this was changed with the input-group-btn class. Here is the new code (I named the new class ):
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.datefield {
max-width: 100px;
}
.buttoncleardiv {
display: inline;
}
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn buttoncleardiv">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
The JS Fiddle is here
I am using direction property for a label. My label contains windows style directory paths(the ones with backslashes). The purpose of using direction:rtl; is to show the end part(or rather filenames) of the path, but the problem is I am getting the leading backslashes as trailing which might confuse the user. How can I prevent this.
Link to fiddle: http://jsfiddle.net/pguwo67m/2/
This is what I am working on:
AddenduM
I have noticed that this problem also arises for other leading special characters as well.
Fiddle: http://jsfiddle.net/6L1az99t/1/
How about this which will remove part of the path when it is too long:
NodeList.prototype.forEach = Array.prototype.forEach;
window.onload = function () {
adjustWidths();
};
function adjustWidths() {
// get all label elements
var labels = document.querySelectorAll('.path').forEach(function (lab) {
var width = lab.getBoundingClientRect().width;
if (width >= 260) {
var path = lab.innerHTML;
var pathArr = path.split("\\");
var newpath = pathArr[0] + '\\...\\' + pathArr[pathArr.length - 1];
lab.title = path;
lab.innerHTML = newpath;
}
});
}
#wrapper {
width: 300px;
border: 1px solid blue;
}
input {
width: 20px;
}
<div id="wrapper">
<div>
<input type="checkbox" />
<label class="path">development\productinfo.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">development\application\models\cron\dropshipmodel.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">develoment\application\controllers\cron\dropship.php</label>
</div>
<div>
<input type="checkbox" />
<label class="path">development\application\models\cron\dropshipmodel.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">develoment\application\controllers\cron\dropship.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">development\productinfo.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">development\application\models\cron\dropshipmodel.php</label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox" />
<label class="path">develoment\application\controllers\cron\dropship.php</label>
</div>
</div>
Check this.
Changes -
1. Add text in span inside label
2. Set width of span and display as block.
Thats it.
label {
direction: rtl;
float: left;
overflow-x:hidden;
white-space: nowrap;
}
label span{
width:150px !important;
display:block;
}
input {
float: left;
}
<div>
<input type="checkbox">
<label class="alterable"><span> \\\\development\productinfo.php</span></label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox">
<label class="alterable"><span>\development\application\models\cron\dropshipmodel.php</span></label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox">
<label class="alterable"><span>\develoment\application\controllers\cron\dropship.php</span></label>
<div style="clear:both;"></div>
</div>
<div>
<input type="checkbox">
<label class="alterable"><span>This is normal text, i want to display end part of a string</span></label>
<div style="clear:both;"></div>
</div>
Thnaks.