Why am I not able to use toggleClass('glyphicon-remove glyphicon-ok') in this snippet?
var Phase;
$(".btn-default").on("click", function(){
$(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");
});
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
}
span {
display: block;
padding: 6px 12px;
}
input[type=checkbox] {
display: none;
}
input:checked + span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group">
<label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
</div>
</div>
This is because of synthetic* click done on input. In fact, click event is fired twice at label level.
One solution is to filter by event target:
var Phase;
$(".btn-default").on("click", function(e) {
if (!$(e.target).is('input')) return;
$(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");
});
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
}
span {
display: block;
padding: 6px 12px;
}
input[type=checkbox] {
display: none;
}
input:checked+span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group">
<label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
</div>
</div>
*note: See spec
When a user agent is to run synthetic click activation steps on an
element, the user agent must run pre-click activation steps on the
element, then fire a click event at the element. The default action of
this click event must be to run post-click activation steps on the
element. If the event is canceled, the user agent must run canceled
activation steps on the element instead.
Related
I'm using an input group to set up an input that allows users to type in a number or edit the number by pressing the plus and minus buttons. For some reason, I can't get them to display in my project. I copied the code to a test page and it displayed there. Also, the text input for the number isn't responding to the CSS that I have set for it as well. What is the issue with my input? I have provided the code below.
This shows up in the css for both buttons as well, but i'm not sure if it has to do with the issue:
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu)
<div class="input-group" id="changePrice${index}">
<span class="input-group-btn" id="minus${index}">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-
field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" id="numberInput${index}" value="${index}"
min="0" max="200">
<span class="input-group-btn" id="plus${index}">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-
field="quant[1]">
<span class="glyphicon glyphicon-plus" id="plus${index}"></span>
</button>
</span>
</div>
.center {
margin: 40px auto;
display: none;
}
.center button:focus {
outline: 0 !important;
}
.center {
position: relative;
top: 50px;
margin: -181px 80px;
}
#numberInput{
width: 25px !important;
height: 23px;
border-radius: 8px;
border-color: #000000;
text-align: center;
}
I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.
The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.
I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.
Update:
Thanks to #Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.
Updated working fiddle: fiddle
I sugget using calc for width:
.anchorDiv {
display: inline-block;
width: calc(100% - 74px);
}
Working Fiddle:
https://jsfiddle.net/q3fra0bm/36/
This here is snippet for your solution. I am just using bootstrap row class.
.comboRow {
margin-bottom: 3px;
}
.comboItem {
display: block !important;
/*width: 67%;*/
}
.comboButtons {
float:right;
margin-top: 3px;
width: 74px;
display: block;
}
.comboItemContainer {
width: 100%;
display: inline-block;
}
.anchorDiv {
display: inline-block;
}
.close {
/*float: right;*/
/*margin-right: 10px;*/
}
.close .edit {
margin-right: 5px;
}
#presetDropdownButton {
position:absolute;
}
.glyphicon {
font-size: 15px;
}
#presetDropdown {
width: max-content;
}
#newPresetEntry {
width: 50%;
height: 24px;
margin-left: 18px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown-menu > li > div > div > a {
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
display: block;
}
.dropdown-menu > li > div > div > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > li > div > div > a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="presetDropdownButton">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Presets
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="presetDropdown">
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 1</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 2 with longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 3 with even longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
</ul>
</div>
This should do the trick.
.comboItemContainer {
width: 100%;
position: relative;
}
.anchorDiv {
display: inline-block;
width: 100%;
padding: 0 80px 0 0;
}
.comboButtons {
width: 74px;
display: block;
position: absolute;
top: 0px;
right: 0px;
}
I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.
This may look hacky but I'm not really that good in Flex and absolutely zero in Grid
This is almost certainly cross browser though
I have following markup:
<div class="row">
<div class="col-xs-6">
<label class="labelTextFormat">Tags</label>
<button><span class="glyphicon glyphicon-edit" style=""></span></button>
<button><span class="glyphicon glyphicon-plus" style=""></span></button>
</div>
</div>
Which gives me following output:
I want to display them next to Label. How should I do that?
Codepen Demo
Your label is 100% wide
Remove that
.labelTextFormat {
font-weight: normal;
font-size: 18px;
color: #a1ebff;
padding-top: 6px;
float: left;
}
.labelTextFormat {
font-weight: normal;
font-size: 18px;
color: #a1ebff;
padding-top: 6px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6">
<label class="labelTextFormat">Tags</label>
<button><span class="glyphicon glyphicon-edit" style=""></span></button>
<button><span class="glyphicon glyphicon-plus" style=""></span></button>
</div>
</div>
<button class="btn btn-success" data-toggle="modal" data-target="#myModalNorm" type="button">
<i class="glyphicon glyphicon-plus"></i>Tags</button>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have some elements can I'm moving into another div (from x to y). The problem is that the the elements in x are deletable but the new copied element is not.
Here is the first state
Here the state after deleting Filter 1
Here the state after adding the Name person above... but I can't delete it like the others elements!
I already checked the classes css and they seem okay.
Here my code.
JS
function AddFilters()
{
if ( $(".filter-edited").css('display') == 'none' )
{
$("#btn_add").html("Hide Filters");
// element is hidden
$(".filter-edited").fadeIn();
}
else if ( $(".filter-edited").css('display') != 'none' )
{
$("#btn_add").html("Add Filter");
// element is hidden
$(".filter-edited").hide();
}
}
$(document).ready(function() {
$('.removable').on('click', function() {
$(this).parent().remove();
});
});
$(document).ready(function() {
$('.addable').on('click', function() {
$(this).parent().appendTo(".filter-added");
$(this).attr('class', 'glyphicon glyphicon-remove pull-right removable');
});
});
HTML
<script src="../assets/own_js/addfilters.js"></script>
<div class="row add-filters">
<div class="col-md-12">
<div class="row ">
<div class="col-sm-10 filter-added">
<span> Filtered on: </span>
<a class="btn btn-default">
<span class="text">Filter 1</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 2</span>
<span class="glyphicon glyphicon-remove pull-right removable"></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 3</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
</div>
<div class="col-sm-2 pull-right">
<a class="btn btn-default" id="btn_add" onclick="AddFilters()">Add filter</a>
</div>
</div>
<div class="row filter-edited" style="display:none;">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 filters">
<a class="btn btn-default">
<span class="text">Business</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class="text">Campaign</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Event</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Channel</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Name person</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
SASS CSS
.add-filters
{
.filter-added
{
span
{
margin-right: 5px;
}
span.glyphicon.glyphicon-remove
{
margin-left: 8px;
color: red;
&:hover
{
cursor: pointer;
color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
}
a.btn.btn-default
{
min-width:100px;
padding: 3px 0px 0px 0px;
margin-left: 10px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
}
&:first-of-type
{
margin-left: 0px;
}
&:hover
{
cursor:default;
background-color: #fff;
border-color: #ccc;
}
}
}
.filter-edited
{
margin-top: 20px;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 7px;
/* Firefox 1-3.6 */
-moz-border-radius: 7px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 7px;
border: 1px solid #ddd;
span.glyphicon.glyphicon-plus
{
margin-left: 4px;
color: #15925f;
}
a.btn.btn-default
{
min-width:150px;
padding: 10px 5px 10px 0px;
margin-left: 5px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
margin-top: 2px;
}
&:first-of-type
{
margin-left: 0px;
}
}
.filters {
padding: 15px;
}
}
}
You are listening only for events on currently shown elements. You need to call .on() function on parent element and pass child selector as a second parameter.
$(document).ready(function() {
$('.filter-added').on('click', '.removable', function() {
$(this).parent().remove();
});
});
$('.removable').on('click', function() {
$(this).parent().remove();
});
Should Be:
$(document).on('click', '.removable', function() {
$(this).parent().remove();
});
The reason behind this being, is that you are only applying this event to the current elements on the page. The markup below applies it to all elements of '.removable' that exist on the document. Current and future.
You could also run a .bind() on the object after it is created, and bind an event to it, but that would take more code and be less efficient.
I'm trying to show a bootstrap glyphicon on the rigth side on my link when I am hovering it.
I've tried using both CSS an JS but it just wont work. So i need som help :)
This is what I am trying to do: When i hoover Foo, I want the pencil icon to show. And so on. The same is going to happen when i hoover 'Bar' and 'This is a link' also
I also want it to be a button.
This is how the html looks like:
<div class="nesting">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <div class="pull-right"><span class="glyphicon glyphicon-pencil" area-hidden="true"></div>
<div class="nesting_child">
<span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar
<span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link
Thank you for your help :)
Answer updated:
check this fiddle, hope this is exactly what you are looking for,
//html
<div class="nesting">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span>
<div class="nestchild">
<span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span>
</div>
</div>
//javascript
$(document).ready(function(){
$('.nesting a').hover(function(){
$(this).children('span.pencil').css({'display' : 'inline-block'});
},function(){
$(this).children('span.pencil').css({'display' : 'none'});
});
});
//css
.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }
Add a "hidden" class and an id to your pencil div and an id to you "Foo" anchor:
<a href="#" class="nesting-item" id="foo">
<span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo
<div id="pencil-glyph" class="pull-right hidden">
<span class="glyphicon glyphicon-pencil" area-hidden="true"></span>
</div>
</a>
CSS:
.hidden { display: none; }
Then add an hover event listener to your anchor (e.g. using jQuery) which adds/removes the hidden class (https://api.jquery.com/hover/):
$('#foo').hover(function () {
$('#pencil-glyph').removeClass('hidden');
}, function () {
$('#pencil-glyph').addClass('hidden');
});
You can use the background-color of the div as glyphicon's color and on hovering the div/glyphicon you can enable the glyphicon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
button{
font-size: 30px;
background: white;
border: 2px solid blue;
margin-top: 10px;
border-radius: 2px;
box-sizing: border-box;
color: blue;
cursor: pointer;
padding: 10px 24px;
transition: box-shadow 200ms;
}
button:hover{
font-size: 30px;
background:blue;
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
padding: 10px 24px;
transition: box-shadow 200ms;
}
span{
color:white;
}
span:hover {
}
</style>
<body>
<div class="container">
<button type="button">
text<span class="glyphicon glyphicon-ok" ></span>
</button>
<button type="button">
text1<span class="glyphicon glyphicon-ok" ></span>
</button>
<button type="button">
text2<span class="glyphicon glyphicon-ok" ></span>
</button>
</div>
</body>
</html>