I read the question on how to get the dropdown to open on hover which was an excellent fix, however I would like to get the nav li to keep "open" class when going down into "dropdown-menu" ul. Here is a jsfiddle http://jsfiddle.net/someyoungideas/29txm/ for my problem.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help</a>
<ul class="dropdown-menu">
<li>New Item</li>
</ul>
</li>
</ul>
</div>
</div>
One way to address your concern is to make use of the twitter-bootstrap-hover-dropdown plugin found on github. The plugin is also one of the answers in the old question: https://stackoverflow.com/a/12851616/538962.
Note the use of data-hover="dropdown" to call the plugin.
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
data-delay="1000" data-close-others="false">Help</a>
Here is a working sample:
http://jsbin.com/xuwokuva/1
Related
I am working on a django project, that is using bootstrap4 and I'm with a little problem with dropdown toggler.
The toggler only toggles the dropdown-menu after the second link!
What I've done wrong?
This is my dropdown HTML code:
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Toggler
</a>
<div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
I had the same problem then resolved. Often I due to a double import of bootstrap js libraries.
Hope will help you.
you need to use the toggle like that and assign the data-target to the drop down menu with it's id
using
data-target="#navbarDropdown"
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
and then assign that id to the menu
<li class="nav-item dropdown show">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarDropdown" class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
I came across the same issue recently, i solved this issue by adding $('.dropdown-toggle').dropdown() after loading the drop-down. Hope this may help without changing from the data-toggle="dropdown" to data-toggle="collapse".
Try to put bootstrap js file before bootstrap css
Ex:
Link Bootstrap.min.js file first.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Then link css file
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
I got the same issue and after changing the positions of the js and css, dropdown works well. Hope it helped you.
I came across the same issue recently, i solved it by writing custom script:
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});
I had the same issue, it occurred because i imported bootstrap library twice. After removing one of them it worked well.
Hope it help you.
Agree with Iwan B. In Rails in javascripts I left only bootstrap.bundle.js. In Gemfile add gem 'popper_js', '~> 1.14.5', respectively in application.js we should add
//= require popper
I have some strange behaviour for the dropdown that I decided to transfer to multicolumn.
<!-- language-all: lang-html -->
<li class='dropdown'>
<a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
<ul class='dropdown-menu multi-column columns-3'>
<div class='row'>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 1</li>
<li class='divider'></li>
<li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
<li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 2</li>
<li class='divider'></li>
<li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 3</li>
<li class='divider'></li>
<li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
</ul>
</div>
</div>
</ul>
</li>
Here is the sample: https://jsfiddle.net/Meeshka/0fazzvdh/9
When selecting each line in dropdown for the first time all is working like a charm. But trying to return to report 3 or 5 I see that I can't do that. While inspecting the code I saw that although I switch to Report 1 or 2, the li element of previous report remains with class="active".
<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
This happens only when I switch between reports in different columns.
Reports in the same drop-down column are working OK.
If I add to each column at least 2 lines, I can manage to switch but not in 100% cases, behavior is unpredictable.
Like in this example: https://jsfiddle.net/Meeshka/0fazzvdh/1/
Is the only way to make it wor correctly is to manually trigger class attribute for the element when I switch to another one?
Is it a bug at all or something I miss in the code?
So far I guess there is no "correct" solution to the bug.
If somebody wants a ready and a very straight forwarded solution, here is how I solved it:
<script type='text/javascript'>
$('a[data-toggle="tab"]').on('click', function(event) {
$(this).closest('div.row').find('li').each(function(){
//console.log($(this).attr('class'));
$(this).removeClass('active');
});
});
</script>
Here's how it looks like in fiddle:
https://jsfiddle.net/Meeshka/0fazzvdh/10/
I'm new to Selenium webdriver. Can someone help me how to make Xpath for (Flag button) on below code.
<div class="right-pan">
<ul class="right-pan-btn">
<li class="closeandtrain">
<a class="gray-color" onclick="btnChangeReviewStatusClick(3)">
<span class="statusiconclass icon-close1"/>
Close
</a>
</li>
<li>
<a onclick="btnChangeReviewStatusClick('3_1')" title="Close and train this policy">
<span class="icon-hats"/>
Close
</a>
</li>
<li class="noclassName">
<a onclick="btnChangeReviewStatusClick(4)">
<span class="flag"/>
Flag
</a>
</li>
<li>
<a onclick="btnChangeReviewStatusClick(5)">
<span class="esc"/>
Escalate
</a>
</li>
<li>
<a onclick="btnCaseClick()">
<span class="case"/>
Case
</a>
</li>
</ul>
<ul class="right-pan-links">
</div>
I tried it on Fire path that path is not working and its showing (Unable to locate element) exception
try xpath //span[#class='flag']
I am not able to comment to your post, so posting this as answer.
You can go through this link to learn about xpaths.
http://www.tizag.com/xmlTutorial/xpathtutorial.php
Can you try this
I think you should click parent of span
//span[#class='flag' and text()='Flag']/ancestor::a[1]
or
//span[#class='flag' and text()='Flag']/..
We're trying to build a very particular interaction/animation with a mega menu that is leading us to a solution where we need to pull the top level items out of the hierarchy.
So, for example, the ideal markup is often something like this:
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
</li>
<li>Meat
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</li>
</ul>
It's hierarchical and fairly easy to navigate via keyboard as well as voice feedback.
For the interaction we're hoping to create, we really need something like this where the two levels are entirely separated:
<ul>
<li>Fruit</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
<div>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</div>
Can this still be made as accessible as the former? If so, what needs to be done to ensure good keyboard navigation as well as screen reader compatibility?
You will need to mark this up as an ARIA menu. The correct markup would be the following:
<ul role="menubar">
<li role="menuitem" aria-haspopup="true" aria-owns="fruitmenu" tabindex="0">Fruit</li>
<li role="menuitem" aria-haspopup="true" aria-owns="vegmenu" tabindex="-1">Vegetables</li>
<li role="menuitem" aria-haspopup="true" aria-owns="meatmenu" tabindex="-1">Meat</li>
</ul>
<div>
<ul role="menu" id="fruitmenu" aria-expanded="true" >
<li role="menuitem" tabindex="-1">Apple</li>
<li role="menuitem" tabindex="-1">Banana</li>
</ul>
<ul role="menu" id="vegmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Radish</li>
<li role="menuitem" tabindex="-1">Potato</li>
</ul>
<ul role="menu" id="meatmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Chicken</li>
<li role="menuitem" tabindex="-1">Beef</li>
</ul>
</div>
Then you need to use JavaScript to implement the controls to manage the expand/collapse of the menus and manipulate the tabindex attribute for focus management (plus move the focus around) and aria-expanded (although depending on the JavaScript keyboard handling this might be superfluous.
Here is an example of an accessible ARIA menu implementation in Polymer although because of the issues with the namespacing in Polymer's shadow DOM emulation, the IDs are not unique as they should be.
A jQuery ARIA menu library
Native Web Components, Polymer and Angular2 ARIA menu implementations
Hyperlink in navbar dropdown doesn't seem to work.Even the "disabled" doesn't seem to work.
Here is my code
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled"
data-toggle="dropdown" href="http://www.google.com"> Link
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li></ul>
</li>
</ul>
</div>
</div>
</div>
Clicking the link where you have set Google as the link won't take you to that link as the click action on that link opens/closes the dropdown menu.
If you put a link on another anchor tag you'll see that those will work fine.