Hi I am using thirdparty js bootstrap-select to show custom select dropdown. To hide livesearch input for options below 5 I set liveSearch false in bootstrap-select. When livesearch is false when i trie to scroll down the options by pressing downkey in keyboard it shows error in the below line.
if (that.options.liveSearch) $parent = $this.parent().parent();
console error
are you talking about bootstarp dropdown this code may help you:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Related
I have a dynamically created set of bootstrap-select widgets I'm making with a dropdown. My issue is that to have the select not close the dropdown I have to put a 'event.stopPropagation()' on the dropdown itself.
When I do this the bootstrap select doesn't open when clicked, but a normal select will work. Is there a way to get the bootstrap select to work within a bootstrap dropdown where stopPropagation() is called on the dropdown click event?
Edit:
Example JsFiddle Test App
https://jsfiddle.net/ChaseRLewisAlamode/r4k5cy9s/1/
HTML
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Manage Statuses <span class="caret"></span>
</button>
<ul class="status-dropdown dropdown-menu" role='menu'>
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Always Visible <span class="caret"></span>
</button>
<ul class="visible-dropdown dropdown-menu" role='menu' style="display: block;">
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
javascript
$(".status-dropdown").on('click',function(e){
e.stopPropagation();
});
I'd recommend reading this question that is very similar.
Angular js stop propagation from Bootstrap "dropdown-toggle" event
Since you didn't post any code, I'm assuming that your problem is fairly similar. If my answer is way off base, you could help me refine it by posting in-code examples of the phenomenon you're curious about.
For your benefit, I'll try paraphrasing it here:
When you click select, I predict that two things happen.
First is that it opens Bootstrap dropdown menu. Second, the event propagates to the parent element and also triggers something like 'showDetails = !showDetails'.
The obvious solution is to try to stop event propagation with $event.stopPropagation() on the td level, so that event doesn't bubble up the DOM tree and never triggers parent ngClick. Unfortunately, it will not work because Bootstrap sets up click event listener on the document element to benefit from bubbling, so you can't stop propagation.
Assuming that's what's happening, I'd recommend that you check this example out:
Javascript:
$("#orgchart").jOrgChart({ chartElement: '#chart' });
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$(.'dropdown-menu').toggle();
});
HTML:
<div id="chart">
</div>
<ul id="orgchart" style="display:none;">
<li>Test
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="text-align:left;">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<ul>
<li>Test1.1</li>
<li>Test1.2</li>
</ul>
</li>
</ul>
I have a dropdown that is triggered by clicking a glyphicon. The glyphicon has a ui-bootstrap tooltip that is triggered on mouse-enter/mouse-leave. The tooltip is also triggered to close when the glyphicon is clicked, and the dropdown is shown.
However, once the dropdown is open, the tooltip is shown again if the mouse-enter is triggered. I would like to prevent the mouse-enter triggering the tooltip when the dropdown is open.
The html for the glyphicon and the dropdown is:
<span class="" uib-dropdown-toggle>
<span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
ng-click="sortTooltipIsOpen = !sortTooltipIsOpen">
</span>
</span>
<ul uib-dropdown-menu class="dropdown-menu-right">
<li ng-repeat="s in sortDesc" ng-click="sortBy(s)">{{s}}</li>
</ul>
I've create a plnkr to show exactly how it working: http://plnkr.co/edit/aeOuJasEHFUH505o2L8T
Any ideas how to do this?
Here is the working plnkr. I have used "is-open" attribute to detect whether dropdown is open or not. Based upon that, I have disabled/enabled the tooltip. I hope it helps.
I have added tooltip-enable="!isDropdownOpen" to the tooltip and is-open="isDropdownOpen" to the uib-dropdown.
<span class="" uib-dropdown is-open="isDropdownOpen">
<span class="" uib-dropdown-toggle>
<span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!isDropdownOpen" >
</span>
</span>
<ul uib-dropdown-menu class="dropdown-menu-right">
<li ng-repeat="s in sortDesc" ng-click="sortBy(s)">{{s}}</li>
</ul>
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
When I try to make a dropdown for some odd reason when its clicked the dropdown menu displays off the page and I cant even see it in my actual website but JSFIDDLE shows it off the screen. Here is the JSFIDDLE where I was testing.
Click here for JSFIDDLE
Here is what I am currently doing.
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href="#">Applications<b class="caret"></b></button>
<ul class="dropdown-menu">
<li>My Applications</li>
<li>Staff Dashboard</li>
<li>Apply</li>
</ul>
Thanks for the help in advance.
There are some problems in your code.Like missing div, tabindex etc.I fixed it up and check whether it helps you-
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="menu1" data-toggle="dropdown">Applications
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
My Apllications</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
Staff Board</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apply
</a>
</li>
</ul>
</div>
Working fiddle- http://jsfiddle.net/vashuStrPro/6p0ux8st/
You need a parent element with the position property not set to static, i.e. to either relative, absolute, or fixed. The dropdown is using an absolute position with top:100%, so if there is no parent item with a position set, then it will use the window element as its reference, hence why it opens at the bottom of the page. Just set the immediate parent of the <ul> to have the position set.
Check out the updated jsfiddle.
Take a normal follow button with a username from https://about.twitter.com/resources/buttons#follow
Put it inside normal bootstrap dropdown like this http://jsfiddle.net/dJDHd/417/ and it will render without the username.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Dropdown</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Another item</li>
<li>
Follow #wikibudgets
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
</ul>
</div>
<br>
<br>
Follow #wikibudgets
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
There is identical button rendered below the dropdown to show it works correctly outside of the dropdown.
EDIT
I am using latest Chrome (38.0) on OSX. The issue does not manifest on latest Firefox.
I found an answer somewhere, the button will not render correctly if drawn while not visible. I had to change my code so that the button is drawn only after the user opens the dropdown.