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.
Related
I have two multi value react-select drodowns as part of a bigger filter component. The issue I am encountering is when you open one of the dropdowns, select one or more values and click outside of it, then the dropdown does not close.
If you click outside of the dropdown without selecting any value then it closes as expected. If you select a value and close the dropdown by clicking in the control and open it again, then it closes on outside click.
Code to reproduce the issue is here: https://codesandbox.io/s/nervous-wildflower-evmi0z
Does anyone have any idea why this is happening?
Because you use a library, and they didn't build you that feature to close the dropdown when you click outside.
In this case, you should customize the Dropdown component using css.
Read this question here may it help you:
react-select wont close when clicking outside
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 have a jQuery menu which expands upon mouseover. All sub-menu items can be clicked on and some sub-menu items have further sub-items when hovered over.
I want to temporarily disable the click event of one of the mid-level menu items so that clicking on it will not fire its click event but will open the next sub-level (I have tried simulating hover over with the Selenium Actions class but it doesn't work).
I have the following code:
((IJavaScriptExecutor)driver).ExecuteScript("$('a:contains(Parent Menu Item)').click();");
((IJavaScriptExecutor)driver).ExecuteScript("$('a:contains(Child Menu Item)').off('click');");
The first line works: the menu expands and the child element is visible. The second line has no effect.
How can I get the jQuery to run in the order it appears in my code?
I understand that bootstrap allows a user to disable links within its dropdown menu component simply by adding a class="disabled" into the corresponding <li> tag.
What I'd like to do is write some javascript so that when a user selects the dropdown menu and clicks on a link within it, that link will become disabled. It's in the nature of the dropdown menu to close immediately when a valid link is selected, or when the user clicks outside of the dropdown box. Therefore when the user opens the menu on any subsequent visit, he or she should see all of their previously selected items appearing as disabled.
I've already tried to use the solutions posted in this link: disable a hyperlink using jQuery, but none of them are working for me.
Using Nagra's above javascript solution in this modified form: $('#my_link').click(function(){$(this).addClass('disabled');}); I am able to add the disabled class to each of the <li> elements whenever a user clicks on the <a> embedded within the <li> parent.
Thank you.
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="#"