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.
Related
I am using basic bootstrap modal inside which there is a summernote text area. Problem is when I click on the insert picture button in summernote, it again opens a modal to choose the picture, but if I click on the modal close button of the summernote picture modal without choosing the picture, it closes the main modal too.
I don't want to close the main modal when modal close of the picture modal is clicked. Any help would be appreciated....
Check that these modals do not share the same id attribute
Also check that they do not share the same name attribute
you can give them separate names manually (like numbers: modal1)
you can also name them automatically with your server-side language when creating them, or with JavaScript upon load, but remember to reference these names correctly in the references, buttons & functions that close them.
#argon 's solution didn't work for me.
But I found this solution (provided here):
('#HtmlContent').summernote( {
dialogsInBody: true,
});
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!
Here is a plunker http://plnkr.co/edit/2Fs6vCciXRRc7GeUwyR2?p=preview
Is anyone could help to advise why the calendar button is not working?
However clicking the calendar textbox showing calendarpopup just fine.
It seems that scope.$watch('isOpen', function(value) { ... }
not working anymore when datepicker is inside accordion and using calendar button.
many thanks in advance,
Ferry
There was one issue in your plunker - as noticed by #Daniel Dawes you need to use is-open instead open, as documented: http://angular-ui.github.io/bootstrap/#/datepicker
Then, the problem of the calendar being cut off in the last accordion is due to the Bootstrap CSS. You can around this by using the datepicker-append-to-body="true" attribute.
Working plunk here: http://plnkr.co/edit/3d3CX25eNbUvv5U8qiV8?p=preview
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/
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="#"