I'm having trouble with my dropdowns after upgrading to Bootstrap 2.1.1.
The very first dropdown on my page works fine. Opens correctly when clicked on, then closes when clicking on either an item, the dropdown header or the page.
However, the second and third dropdowns (I'm guessing any dropdown other than the first) on my page don't work correctly.
They don't close when clicking on an item, page or their header.
I looked around for a bit and found the following snippet, which I didn't need before:
$('.dropdown-toggle').dropdown();
When I include this in my code, the second/third dropdowns do close when clicking on the page or on an item. They still don't work when clicking on their header.
The HTML for these dropdowns is exactly the same as the HTML for the first one. I can't find any differences, nor an explanation why only the first dropdown works correctly.
I have put some code on JSfiddle here: http://jsfiddle.net/3CysL/1/
You are linking dropdown triggers with their parent, the dropdown container.
This is breaking your triggers, so change:
href="#media" -> href="#"
href="#tools" -> href="#"
href="#language" -> href="#"
Related
I'm not able to get routerLink activated on the dropdown on init.
It works after I trigger the dropdown by clicking on it once and keeps working even after I close it.
It isn't working on init because the dropdown DOM is not rendered by that point.
It gets rendered after the dropdown button is clicked.
I want the dropdown list rendered and hidden on init please.
StackBlitz that reproduces the issue:
https://stackblitz.com/edit/ngx-bootstrap-dropdown
This is the default stackblitz for ngx-bootstrap-dropdown.
If DOM is observed, on init, the dropdown elements are not rendered but after it is opened and closed, the elements are there.
On init before the button is clicked
After the dropdown is clicked and closed, the ul is there
What I am looking for is a proper way to use the dropdown pre-rendered (and definitely hidden) so that routerLink is already working
I've modified the code on several places now and I've come up with the following solution: jsfiddle.net/u2158392/2g8poyxh/
It's working pretty well, but I'm looking for a way to close the other dropdown menus which are still open when I'm clicking on another one.
So how can I make sure only one dropdown menu can be activated on the page at all times?
Thanks in advance!
I followed the below post which helped in creating the dropdown accordion.
Twitter Bootstrap: How to create a dropdown button with an accordion inside it?
However the dropdown doesn't close back and behave normally when I execute a javascript function from any of its <a> tags.
Updated fiddle with the issue.
jsFiddle with Bootstrap example code
http://www.bootply.com/rbuS0mHLvd
check out this link if it will help.
If not then please explain the problem in detail with this code relevant to your code.
Basically i have removed the data-toggle=collapse as it will add the "in" class to your dropdown by which the dropdown is opened untill the class "in" is removed.
I'm creating a small webapp using jquery mobile and php. I have an issue where I have a menu in a panel which i need to run an onclick event from. This works fine when the page has been re-loaded either using data-ajax='false' or running a page refresh. However when I try to use the event after a page change it just doesn't respond at all.
Here is my onclick code
$('#searchOptionMap').click(function()
{
window.alert("map clicked ");
});
and you can see the js fiddle here http://jsfiddle.net/jbcvnz0p/
If you go to page 1 - panel click - map click the alert appears
If you then navigate to page 2 - panel click - map click the alert doesn't appear
If you stay on page 2 and click the map collapsible - alert appears
You can see that the same onclick event works for a collapsible set outside the panel, just not within it. Is there any fix for this other than using data-ajax='false' or running a page refresh?
You have two divs with the same id, when you bind something with jQuery using an id, it only does the first one.
$('#searchOptionMap').click(function()
{
window.alert("map clicked");
});
So use a class instead, or make the panel external if it's going to be the same panel for both pages.
(#searchOptionMap2 works in this case because there's only one of them)
I have button that when I click on it I get "pop up window" (use boostrap modal) with data. I used twitter boostrap tooltip and everything works fine. when I decide replace the tooltip by popover I get some strange problems. first of all I want popover show up when I hover a link but it appear only when I click on the link. secondary the popover appears on the main window and don't disappear no metter what I try. I just want him appear on the boostrap modal like my last tooltip.
this is my link:
link
js:
$('.blob').popover();
how can I fix it? what wrong?
You spelled trigger incorrectly, should be:
link
With that corrected it works fine in jsfiddle for me.
Not sure why the data-trigger attribute isn't working, but passing the option using the JS initialization parameter makes it behave as you intend:
$('.blob').popover({trigger: "hover"});
jsfiddle here:
http://jsfiddle.net/dcasadevall/S8sXQ/1/