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?
Related
js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?
In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
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
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 have a input field where the user can type normally. Just beside the field there is an arrow
on click of that arrow a dropdown will get open that contains list of data.
Now when the user clicks on any of the values in the dropdown list that should get displayed in the input field
This selected value can be edited by the user as it will be treated as a normal input value.
The issue at my end is that when i select the value from dropdown it is coming like this
HTML Code
<input type="text" value="" id="job" placeholder="Job title" class="form-control title" name="job">
<button type="button" class="form-control btn btn-default toggle-dropdown pj-dropdown-menu pj-jobtitle" data-toggle="dropdown" name="job_title" id="job_title">
<input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value="">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu line pj-dropdown-menu" role="menu" >
<li class="line" >
<a href="#">
<span class="developer">Frontend Developer </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
<li class="line">
<a href="#">
<span class="developer">Backend Developer </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
<li class="line" >
<a href="#">
<span class="developer">Business Consultant </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
</ul>
Script Code
<script>
$('.dropdown-menu a').on('click', function(){
$('.toggle-dropdown').html($(this).find('span').html() + '<span class="caret"></span>');
})
</script>
Can you please try this script.
<script>
$('.dropdown-menu a').on('click', function(){
$("#job").val($(this).find("span").text());
})
</script>
On click of a tag simply find the inner span's text and assign that as a value in a text box with ID #job.
I have this div (the topmost one in the markup below) in my HTML code that I'm trying to find via jQuery .children(). For some reason jQuery just can't find it.
This can be tested by running this:
$($('<p class="info-item"><span class="info-item-key">Gender:</span><span class="info-item-value">Male</span><span class="info-item-edit-button"> <a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a></span><div class="form-inline info-item-edit-input"><div class="form-group"><div class="input-group"><input type="text" class="form-control" value="" /><div class="input-group-addon"><a class="black-link info-item-edit-save-link"><i class="fa fa-check"></i></a></div></div></div></div></p>')[0]).children()
Here is the same markup contained in that code, but better formatted:
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>
For context, I'm trying to use jQuery to show the edit form when the edit button is clicked.
Is there any reason why this div seems to be invisible to jQuery? .contents() can't find it either. (Try it.)
If it helps, that div is initially hidden with display: none in CSS, but even trying it in a JS console session attached to a document that doesn't have that CSS results in the div not being found either. (Try it in the StackOverflow JS console, or any other site, if you want.)
That's because the markup is invalid. div can't be child of a p element. p element can only have phrasing content.
Consider this simple example:
$('<p><div></div></p>');
This is how my Chromium browser renders the above markup:
<p></p><div></div><p></p>
The following fiddle shows you how to access the div you are looking for. I added some text within the div so you can see the alert.
https://jsfiddle.net/xw9Lteww/1/
JS
$(document).ready( function() {
alert($(".form-inline").text());
});
HTML
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
hey
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>