I have two glyphicons that I want to be right next to each other, but they have some space in between them, and I can't seem to get rid of it.
Here is how it looks:
Here is my code:
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
css:
.glyphicon {
font-size: 25px;
vertical-align: middle;
}
#authForm {
display:inline-block;
width:150px;
}
Decrease or remove the width from #authForm.
.glyphicon {
font-size: 25px;
vertical-align: middle;
}
#authForm {
display:inline-block;
width:30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
Simply Use span, form-group is required for html form elements.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
Related
There are three content blocks and I'd like to enable/disable them with the Bootstrap's data-* "tools". The control elements should be checkboxes. When a content block is displayed, its checkbox should be checked.
summary
The problem is, that the checkbox inside links are not working as expected (starting to change the state only after the second click), after adding the Bootstrap behavior to the wrapping a tags.
The code is here.
long version
So first of all I created the content blocks and the controls without functionality (and gave them some styles):
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
<div>
<a href="#containerFoo">
<label class="btn btn-primary" id="filterFoo">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">foo</span>
<span class="glyphicon glyphicon-question-sign"></span>
</label>
</a>
<a href="#containerBar">
<label class="btn btn-primary" id="filterBar">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">bar</span>
<span class="glyphicon glyphicon-ok-sign"></span>
</label>
</a>
<a href="#containerBuz">
<label class="btn btn-primary" id="filterBuz">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">buz</span>
<span class="glyphicon glyphicon-remove-sign"></span>
</label>
</a>
</div>
</div>
</div>
<div> </div>
<div class="panel panel-default in" id="containerFoo">foo</div>
<div class="panel panel-default in" id="containerBar">bar</div>
<div class="panel panel-default in" id="containerBuz">buz</div>
The checkboxes are behaving as expected. Now the actual functionality needs to be added. The the A tags were extended as follows:
...
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo">
...
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar">
...
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz">
...
</a>
...
Now the toggling is working. But the checkboxes are always checked. Well, after it I also extended the DIV wrapper around the control checkboxes:
<div class="btn-group" data-toggle="buttons">
Now the checkboxes are behaving ever stranger. On the first click the checkbox remains on (checked). An from the second click on the same checkbox the behavior becomes normal: the state gets changed on every click.
Is it a bug or am I doing something wrong?
How to get checkboxes inside links working correctly, when Bootstrap toggling is used?
I would keep the link and drop the form elements.
the checkbox can be drawn from a pseudo holding a checkmark or not.
here is the basic idea : https://jsfiddle.net/jsL3dx1w/7/
#filter-bar {
margin: 0;
padding: 0;
white-space: nowrap;
text-align: right;
}
#filter-bar * {
box-sizing: border-box;
}
#filter-bar a,
#filter-bar a:hover {
text-decoration: none;
}
a[data-toggle]:before {
display:inline-block;
content:'\2713';
border:solid 1px white;
box-shadow:inset 0 0 2px black, 0 0 1px black;
line-height:0.6em;
color:darkblue;
width:0.8em;height:0.8em;
}
a[data-toggle].collapsed:before {content:''}
#filter-bar {
outline: none;
border: 0;
color: #ffffff;
}
#filter-bar span{
margin: 5px 5px 0 5px;
outline: 0;
}
#filter-bar .btn:active,
#filter-bar .btn.active {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#containerFoo,
#filter-bar #filterFoo {
background: #f5a623;
}
#containerBar,
#filter-bar #filterBar {
background: #50c14e;
}
#containerBuz,
#filter-bar #filterBuz {
background: #d21f31;
}
.clear {
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
<div class="btn-group" data-toggle="buttons">
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo"class="btn btn-primary" id="filterFoo">
<span class="text-label">foo</span>
<span class="glyphicon glyphicon-question-sign"></span>
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar" class="btn btn-primary" id="filterBar">
<span class="text-label">bar</span>
<span class="glyphicon glyphicon-ok-sign"></span>
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz" class="btn btn-primary" id="filterBuz">
<span class="text-label">buz</span>
<span class="glyphicon glyphicon-remove-sign"></span>
</a>
</div>
</div>
</div>
<div> </div>
<div class="panel panel-default in" id="containerFoo">
foo
</div>
<div class="panel panel-default in" id="containerBar">
bar
</div>
<div class="panel panel-default in" id="containerBuz">
buz
</div>
automatix wrote
I took your solution and edited it a bit. The principle is still the same, but implemented with glyphicons: http://jsfiddle.net/automatix/jsL3dx1w/41 .
I've using bootstrap labels in web page but in normal page its looking good but in modal there is no margin b/w two labels:
$('.task').dblclick(function (e) {
$('#Modal_Task_View').modal({keyboard: true, show: true});
});
/* Common styles for all types */
.task {
padding: 10px 15px;
margin: 10px 0;
border: 1px solid #eee;
border-left-width: 10px;
border-radius: 3px;
}
.task h4 {
margin-top: 0;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="task task-overdue" data-id="2">
<div class="row">
<div class="col-lg-9 col-md-8 col-sm-6 col-xs-12">
<h4>Title 2
(First Category)
<i class="fa fa-eye" aria-hidden="true"></i>
<i class="fa fa-pencil" aria-hidden="true"></i>
</h4>
Assigned to :<span class="spn-actionee">
<label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
<label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
</span></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<span class="pull-right">
Due Date: 26-Jun-2017<br>
Days Left: 0
</span>
</div>
</div>
</div>
<div class="modal" id="Modal_Task_View" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" ><div class="modal-backdrop fade in"></div>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title task_title">Task 2 Wishlist </h4>
<label class="label task_status task-head-due">Due</label><label class="label label-info task_priority">Normal</label>
<span class="pull-right"><label>Due Date : <span class="task_due_date">08-Jul-2017</span></label></span>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<label>Category : <span class="tc_name">Second Category</span></label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label>Description :</label>
<span class="task_desc">Description Description Description</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Assigned To :</label>
<span class="spn-actionee"><label class="label label-info" data-id="1">Standard</label><label class="label label-info" data-id="17">Ash Wilde(ACW)</label><label class="label label-info" data-id="2">admin admin(admin)</label></span>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="list-group spn-linked">Linked TasksTitle 4Title 3</div>
</div>
<div class="col-sm-6">
<div class="list-group linked-docs">Documents</div>
</div>
</div>
</div>
</div>
</div>
</div>
The label class ".label" is an inline element by default so when you place two or more together there should be some space inbetween by default. This should also work inside a modal.
Also, you should not be using the <label> element for this. The <label> tag defines a label for an <input> element. Use a <span> instead.
This because of no line change or spacebar in modal have a look these two example
No Space/Line Change Example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span><label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label><label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label></span>
Line Change Example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span>
<label class="label label-info" data-type="1" data-id="28">Gobind Samrow(admindddd)</label>
<label class="label label-info" data-type="1" data-id="22">Chris Walker(CW)</label>
</span>
You can try this
#myModal .modal-body span.spn-actionee label {
margin-right: 10px;
}
Hope it will helps you.
I am trying to create this list-group-item example below with two buttons (instead of just one) that should pull to right and also be of equal height to the list-group-item itself:
At the moment I do have the skeleton working, but as you can see they are not positioning correctly.
Thanks.
li.group-btn {
padding: 0;
border-radius: 0;
}
.form-control,
.btn {
border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<div class="input-group">
<span class="pull-right">
<button class="btn btn-default" type="button">Go!</button>
</span>
<span class="pull-right">
<button class="btn btn-default" type="button">Go!</button>
</span>
<span class="left">Cras justo odio</span>
</div>
<!-- /input-group -->
</li>
</ul>
</div>
You can use i.e display: table; / display: table-cell;
li.group-btn {
padding: 0;
border-radius: 0;
}
.form-control,
.btn {
border-radius: 0 !important;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<div class="input-group" style="display:table; width:100%;">
<span style="display: table-cell; border:1px solid #ccc; padding: 0 8px; vertical-align: middle;">Cras justo odio</span>
<span style="display: table-cell; width: 40px;">
<button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button>
</span>
<span style="display: table-cell; width: 40px;">
<button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button>
</span>
</div>
<!-- /input-group -->
</li>
</ul>
</div>
How to align others elements with bootstrap btn-group?
<div class="btn-toolbar text-center">
<div class="pull-left">
<span class="glyphicon glyphicon-envelope " style="font-size:1.5em;"></span>
<label>Title</label>
</div>
<div class="btn-group btn-group-sm pull-right">
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-edit"></span>
</div>
</div>
This how looks like, I want to text and icon would be inline.
EDIT:
Now text are inline with buttons but icon aren't.
<div class="pull-left">
<span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
<label style="line-height:30px;">Title</label>
</div>
Please try this:
.glyphicon {
position: relative;
top: -1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: middle;
}
Try this.Adding a span to your label solves most of the problem by aligning label and glyphicon. I guess this is what you wanted.
<div class="btn-toolbar text-center">
<div class="pull-left">
<span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
<span style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"><label>Title</label></span>
</div>
<div class="btn-group btn-group-sm pull-right">
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-edit"></span>
</div>
</div>
I have also created a jsfiddle.
I'm trying to solve the various issues with Bootstrap input-group placed inside navbar. The formatting http://bootply.com/101777
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<span class="navbar-brand">Game</span>
</div>
<form class="navbar-form navbar-left itg-game">
<div class="form-group itg-first">
<div class="input-group">
<span class="input-group-addon" ng-bind="first.name"></span>
<input type="text" class="form-control" readonly ng-model="first.value">
</div>
</div>
<div class="form-group">
<div class="btn-group itg-action">
<button ng-click="swap()" class="btn btn-default itg-action-btn" ng-bind="text"></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href ng-click="resetGame()">Reset game</a></li>
</ul>
</div>
</div>
<div class="form-group itg-second">
<div class="input-group">
<input type="text" class="form-control" readonly ng-model="second.value">
<span class="input-group-addon" ng-bind="second.name"></span>
</div>
</div>
<div class="form-group itg-fee">
<div class="input-group">
<input type="text" class="form-control" readonly ng-model="fee">
<span class="input-group-addon">fee</span>
</div>
</div>
</form>
</nav>
</div>
And the styles:
#media (min-width: 768px) {
.itg-game { }
.itg-game .itg-first, .itg-game .itg-second { width: 12em; }
.itg-game .itg-fee { width: 8em; }
.itg-game .itg-action { text-align: center; }
.itg-game .itg-action .itg-action-btn { width: 15em; }
}
There are two issues:
The mobile view (less than 768px) is completely rubbish - lines overlaps the borders of the navbar, controls stick to the borders.
mid-size version is better but for some reason the third input jumps to the third line.
It looks like the input-groups are not compatible with navbars. Am I right?
They work fine with the navbar with a minimal amount of fiddling with the css, but you can't have it set up like you have it because the size matters. Input groups are display:table and 100% width, they need a col-. If you had too many links or links with really long names, your navbar would break down crappily.
DEMO http://jsbin.com/putuki/1/edit
<div class="navbar navbar-default navbar-static-top my-navbar">
<button class="navbar-toggle visible-xs" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"><!--empty--></span> <span class="icon-bar"><!--empty--></span> <span class="icon-bar"><!--empty--></span></button>
<div class="container visible-xs">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse" id="mynavcollapse">
<div class="container">
<div class="row">
<form>
<div class="col-sm-2 hidden-xs">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="col-sm-2">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
<div class="col-sm-2">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
<div class="col-sm-3">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
<div class="col-sm-3">
<div class="input-group">
<input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
</div><!-- /input-group -->
</div><!-- /col- -->
</form>
</div>
</div>
</div>
</div>
CSS
.my-navbar .row [class*="col-"] {
margin-top: 10px
}
#mynavcollapse {
clear: both;
padding: 0 0 10px;
background: #eee;
}
#media (min-width: 768px) {
.my-navbar .navbar-brand {
float: none;
display: inline-block;
padding: 7px 0 0 0;
}
.my-navbar .row {
margin-left: -.5%;
margin-right: -.5%;
}
.my-navbar .row [class*="col-"] {
min-height: 1px;
padding-left: .5%;
padding-right: .5%;
padding-top: 10px;
margin-top: 0;
}
}