I have below stackblitz
When I move click event form li to input change, it fired once, but
event.stopPropagation();
does not work.
https://stackblitz.com/edit/bootstrap-pvjfbv?file=index.html
Please help I spent alot of time, but could not manage to make it work
Removing the 'label' element surrounding the 'input' tag fixes the issue.
<div class="flx" style="align-items: flex-start">
<div style="flex: 1;">
<div class="dropdown_23 drp-custom-select-container modal-select-custom">
<div class="btn-group keepopen bootstrap-select form-control input-sm ddlcustomselect" data="Select">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button">
<span #spnSelectedText class="filter-option pull-left" style="width: calc(100% - 20px);overflow: hidden;margin-right: 20px;">Select</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox" style="max-height: 482px; overflow: hidden;">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 470px; overflow-y: auto;">
<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
<input type="checkbox"/>
<span class="checkmark"></span>
<span class="text">{{item.Text}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Refer this
you have to emit #output
in template file - apply change event on input check box instead of li
<li *ngFor="let item of data_source" >
<label class="checkboxcontainer checkbox-inline">
<input type="checkbox" (change)="SelectElementCliked($event, item)"/>
<span class="checkmark"></span>
<span class="text">{{item.Text}}</span>
</label>
</li>
In ts file
SelectElementCliked(event: any, item: any) {
if ( event.target.checked ) {
console.log(item);
this.onItemSelected.emit(item);
}
}
changing the < li > content to as follows fixes the issue
<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
<label class="checkboxcontainer checkbox-inline">
<input [id]="item.Value" [name]="item.Value" type="checkbox" />
<span class="checkmark"></span>
<label (click)="$event.stopPropagation()" [for]="item.Value" class="text">{{item.Text}}</label>
</label>
</li>
on clicking the label 2 events are propagated to the parent component , hence emiting 2 events. you may block the click of the label element using stopproagation
Related
I am trying to have a search bar with 2 options (as dropdown list) and ONLY if user selects S1 it should call a highligthme () function and should display .
but if user selects S2 it should not call this function and my code is calling this function on both selections from drop down list ?
Below is my code. Please guide what am i doing wrong?
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown" role="menu" >
<li id="S1"><a href="#" >search 1</a></li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button></span>
<span class="result-count" ></span>
</div>
CSS being used is:
/* Style to create scroll bar in dropdown */
.scrollable-dropdown{
height: auto;
max-height:320px; /* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
Ok you missing the event listeners on your buttons clicks .
Another think I changed was to give the elements ID's so we can add events to them .
I also used they CSS libraries that come with bootstrap
In order to get the popup to display we have to add the
show
class to the element
Here is the working code in the snippet It shows the popup and runs a function called highlight if S1 is clicked ...
I trust this helps
//first thing is to get the action button click event
var dropdown = document.getElementById('dropdown');
dropdown.addEventListener("click", display);
function display(e) {
var foo = document.getElementById('foo');
if (foo.classList.contains('show')){
foo.classList.remove('show');
}
else{
foo.classList.add('show');
}
}
// now to run your highlight me function
var s1 = document.getElementById('S1');
s1.addEventListener("click", highligthme)
function highligthme() {
console.log('this does whatever hilightme does ')
foo.classList.remove('show');
}
.scrollable-dropdown {
height: auto;
max-height: 320px;
/* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id='dropdown'>
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown " id='foo' role="menu ">
<li id="S1">search 1</li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"
onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,
document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<span class="result-count"></span>
</div>
I am trying to make my dropdown open only on click. Currently, I can click to open the dropdown however when I move my mouse to the submenu or anywhere else the submenu disappears.
I have tried to use e.stopPropagation but no luck.
Is there a CSS or Javascript solution I can use to help.
HTML
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="menu-anchor" href="javascript:;">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
<div class="dropdown-menu" id="myDropDown">
<div class="row">
<div class="col-xs-6 col-md-4">
<label for="activityCode">Activity Code</label>
<input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="awardId">Grant Number</label>
<input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="granteeName">Grantee Name</label>
<input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('#myUlList').on({
"click":function(e){
e.stopPropagation();
}
});
$('#myDropdown').on({
"click": function (e) {
e.stopPropagation();
}
});
Use <a class="dropdown-toggle" data-toggle="dropdown" href="#"> to open/close a dropdown menu in Bootstrap. JQuery code for the dropdown is not needed. Ofcourse the jquery.min.js and bootstrap.min.js are required.
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
</a>
<div id="myDropDown" class="dropdown-menu">
...
</div>
</li>
</ul>
</div>
I don't recognize your jquery as valid syntax. Try this to trigger a function on click.
$('#myUlList').on("click", function(e) {
e.stopPropagation();
});
$('#myDropdown').on("click", function(e) {
e.stopPropagation();
});
I created a Bootstrap live-search picker that is added by jQuery and animated by Animate.CSS after clicking on the green plus button. Without animate CSS, the Picker behaves like a charm. Unfortunately, using animation classes of Anmiate.CSS, the picker is always below all the other content (see Screenshot).
The selectpicker is added by the following code. In the variable "select" are the option values, that are inserted in the picker. Finally, the select picker is initialized.
$('#addPosition').click(function() {
...
$('#articlelist').append("<div style='margin-top: 5px;' class='animated rollIn buffer'>"+
"<div class='row'>"+
"<div class='col-sm-1'><button type='button' class='btn btn-danger btn-sm removePositionArticles'><span class='fa fa-minus'></span></button></div>"+
"<div class='col-sm-8'>"+
select+
"</div>"+
"<div class='col-sm-3'><input type='number' class='form-control' name='addamount[]' value=''></input></div>"+
"</div>");
//Initialize Selectpicker
$('.selectpicker').last().selectpicker();
}
The resulting HTML Code looks like the following:
<div style="margin-top: 5px;" class="animated rollIn buffer">
<div class="row"><div class="col-sm-1">
<button type="button" class="btn btn-danger btn-sm removePositionArticles">
<span class="fa fa-minus"></span>
</button>
</div>
<div class="col-sm-8">
<div class="btn-group bootstrap-select form-control open">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Niska Teppich" aria-expanded="true">
<span class="filter-option pull-left">Niska Teppich</span>
<span class="bs-caret"><span class="caret"></span></span>
</button>
<div class="dropdown-menu open" style="max-height: 585.458px; overflow: hidden; min-height: 123px;">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off">
</div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 536.458px; overflow-y: auto; min-height: 74px;">
<li data-original-index="0" class="selected active">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">Niska Teppich</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
//Further Options
</ul>
</div>
<select class="form-control selectpicker" name="addarticleid[]" data-live-search="true" tabindex="-98">
<option value="1">Niska Teppich</option>
//Further Options
</select>
</div>
</div>
<div class="col-sm-3"><input type="number" class="form-control" name="addamount[]" value=""></div>
</div>
The additional elements that are added look the same. The Button is a "regular" Bootstrap Button with Bootstrap Classes. I tried playing with z-Index to remove this problem, but however it is not working.
Can you help me? Of course, I can just avoid using animate.css, but this is not my final intention :-/
try adding the following in your css file. This should take care of it.
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:none!important;animation-fill-mode:none!important}
Source: https://github.com/daneden/animate.css/issues/596
Hi i was wondering if it is possible to override or disable inheritance from a parent tag.
what i want to do is to be able to make use if the "input-group" class but having a particular tag not inheriting the toggle function from the parent a-tag.
the reason i'm doing this is because i'm using a plugin and i want to add a button looking consistent with the overall theme.
Here is some code:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From date</lable>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<!-- COMMENT: i want the span tag shown under this comment NOT to inherit the a-tag's toggle function, it being inside it and all -->
<span type="button" id="dateRemove" class="input-group-addon" ng-click="clearToDate()"><i class="glyphicon glyphicon-remove"></i></span>
<input type="text" class="form-control" data-ng-model="data1.dateDropDownInput1" data-date-time-input="YYYY-MM-DD HH:mm" disabled="disabled"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="data1.dateDropDownInput1" data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" />
</ul>
</div>
</div>
So is this at all possible?
In my main view, I have an add button. Clicking the add button brings in a partial view.
Main.cshtml
<div id="NameCats">
#Html.Partial("_Temp")
</div>
<div class="row">
<button id="addInfo" class="btn"><img src="~/Content/Images/Add.PNG" /></button>
Add Info
</div>
In my Temp partial view, I have multiple bootstrap input drop down groups.
_Temp.cshtml
<div id="info">
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input id="name" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="nameList" class="dropdown-menu pull-right">
<li> <a tabindex="-1" href="#"> Test1 </a> </li>
<li> <a tabindex="-1" href="#"> Test2 </a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input id="cat" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="catList" class="dropdown-menu pull-right"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
Selecting an item from first drop down should fill in the input for that drop down with the selected value. Here is my javascript to make it work. The problem is when I select item from the drop down that is rendered initially, the click (li a) function works but when I click Add button and then try to repeat the selection for the drop down in this new info section, the click (li a) function is not hit. What am I doing wrong?
$(function () {
$('.dropdown-menu').each(function () {
$(this).on('click', 'li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
});
$(function () {
$('#addInfo').click(function (e) {
e.preventDefault();
$('#NameCats').append($("#info").html());
});
});
The issue is your that your newly added elements do not have a click handler associated with them, since the function to add the handler is only run on page load. You have the concepts of event bubbling in place, but on the wrong parent elements and that essentially only keeps an eye on new li a elements and not entire dropdown-menu being added.
Change your first function to the following, which will keep a "watch" on any dropdown-menu added in the #NameCats element.
$(function () {
$('#NameCats').on('click', '.dropdown-menu li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
Here is a jsFiddle working example.