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
Related
I'm using a fork of React-Select for a project adding customized functionality. I'm trying to disable the dropdown from opening when a user clicks on one of the tags (When multi is set to true). So if a user clicks on one of the tags the dropdown menu won't open. I went over Value.js file to see if I could find the isOpen state triggered by clicking on the tags but couldn't find it.
Here's a screenshot illustrating what I mean.
In case if used custom tag component (valueComponent)
try to use:
onMouseDown = (e) => e.stopPropagation();
(instead of onClick) on that component.
I am using a bootstrap popover to display an instance of fancytree. On the initial click of the button that triggers the popover, everything loads and initializes correctly.The user can select items in the tree, search for items in the tree, etc. When the popover is dismissed and then shown for the second (or more) time, only the original static html that was in the data-content attribute is shown. After looking at the DOM while this happens, it appears that the popover is just replacing the dynamically generated content that fancytree created with the static content in the data-content attribute.
My question is, is there a way/option for the popover to not reinitialize the content every time it is displayed and just hide it instead?
Because I have an instance of fancytree created dynamically, I can't just swap out the HTML as it would no longer "link" to the fancytree object.
Any help is greatly appreciated!
This is not a solution to the issue of preventing the bootstrap popover from re-initializing the content inside of it but I did end up going with the bootstrap dropdown instead since the content that is displayed by it does not get reset every time a user opens it.
At http://brianreavis.github.io/selectize.js/ -- if you scroll down to Single Item Select and click on the dropdown -- is there a way to keep the dropdown open without it closing as soon as you click elsewhere?
I've tried unhiding divs and forcing element states to no avail.
I've implemented into my website the Bootstrap dropdown menu and the issue is that when I load the page, then as the default statue is popped up dropdown menu. I am struggling with how to have this dropdown menu hidden when the page is loaded as default.
Here's the HTML structure:
Sign in
<div class="login_window dropdown-menu">
...
</div>
So, when I load the page, the window is displayed. When I click somewhere, then is hidden. When I click on it, then will be displayed again. That's ok.
But I am trying to have the window have hidden when I load the page. How to achieve that?
Thanks
add display:none in default css for the class you want to hide...then in jquery do
$("body").click(function(){
$('.divclass').css('display','block'); /*or $('.divclass').toggle() */
})
My guess is that you have the structure of your HTML wrong. Did you look at the example on bootstrap? http://getbootstrap.com/components/#dropdowns
You need to have a clickable element (button, div, span - whatever) that's never hidden. When you click that element it animates the visibility of a sibling or child element to show the menu items. Try using the code from the sample and simply replace the <li> values with your menu items. That should help you understand the required form.
There is no need to toggle visibility on your own.
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="#"