I am using Foundation 6 Zurb Template with flexbox enabled and the expanded feature of the button group is not working.
When I add the expanded class the last button will not fill the last space and drops to the next line on the left side. The text is no longer inline and the width of the buttons are not the same.
<div class="expanded button-group">
<a class="button">Expanded</a>
<a class="button">Button</a>
<a class="button">Group</a>
</div>
Any idea what could be wrong? Tnx!
It works with foundation 6.2.1, which version you are using?
see the CodePen example. http://codepen.io/shoaibik/pen/VaJbvj
Related
I am developing an automation script and a part of it requires me to hover over a navigation bar to display a dropdown menu. The script is written using NodeJS and the browser used is Internet Explorer.
Navigation source code
...
<ul class=navigation " data-dojo-attach-point="nonmMenu ">
<li class= "dropdown ">
<i class="fa fa-clipboard nav-icon " aria-hidden="true "></i><span>Accounts</span>
<div class='fulldrop i3">..</div>
</li>
</ul>
...
NodeJS code:
let xPathButton = "//span[text()='Accounts']";
//Find button to hover over
let buttonWithDropDown = driver.findElement(By.xpath(xPathButton));
//Hover
driver.actions().mouseMove(buttonWithDropDown).perform();
However, this does not work. The end goal is to click a link once the dropdown menu appears, which I have tried doing but as the element is not visible I get the exception ElementNotInteractableError: Cannot click on element. I would appreciate some pointers in the right direction to sort this out.
Update:
Been looking at this a bit more; Could the aria-hidden attribute in the anchor tag be causing the selenium driver to not detect the element?
Please note that changing the browser is not an option.
Try to hover over an a or li element. Also you can try click:
By.xpath("//a[span[.='Accounts']]")
By.xpath("//li[.//span[.='Accounts']]")
You can try open menu without opening menu with javascript:
executeJavaScript("arguments[0].click();", yourDropdownMenuElement);
I use the "SB Admin 2" Theme for a project.
The integratet Metis Menu works very well on desktop, also on tablet.
But when I visit the page with my phone, the menu doesn't hide completely.
Only when I scroll the page.
You can visit https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html to test ist.
If you shrink the browser as far as its like a mobile screen, the menu does not hide.
I tried to do it on the bottom of my index.html file with $('#side-menu').metisMenu('collapse'); but it does not work. This is also defined in the sb-admin-2.js file. But it doenst work either.
Can you help me to get the menu hide completly, even on mobile devices?
Try downgrading the JQuery version to 2.1.3:
https://code.jquery.com/jquery-2.1.3.min.js
There are issues with metismenu with newer Jquery versions:
https://github.com/onokumus/metismenu/issues/128
You can do this with hiding it with css only
.navbar-top-links {
display: none
}
Or if you don't want to hide it always only on button click. Create a new button with these attributes before your current unordered list (ul)
<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true">
And replace this code
<ul class="nav navbar-top-links navbar-right">
With this code
<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">
I managed to get it working like this only you have to style the button and place it in the correct position.
If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.
If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
If you for some reason are using a keyboard, you cannot tab out of
that menu.
However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.
Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?
An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:
<body>
<div class=”maincontent” aria-hidden=”false”>
// Main content.
</div>
<div class=”mobilemenu” aria-hidden=”true” style="display:none">
// Menu.
</div>
</body>
When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.
Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.
So, any piece of advice, thoughts etc are very welcome!!!
Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `
<div class="menu-container">
<div class="menu">
<div tabindex="1">Menu Item 1</div>
<div tabindex="2">Menu Item 2</div>
<div tabindex="2">Menu Item 3</div>
</div>
</div>
This may not be the best solution depending on what your trying to accomplish and what your code structure looks like.
You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.
Good description and example
WebAIM-tabindex-accessibility
The Close Button seems to be a good way for displaying a notice which the user can click away. But its usage remains rather elusive to a newb.
I have placed one on a page:
<div>
<div class="callout" data-closable="slide-out-left">
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
But now I am unaware of any way of changing its color the Zurb way, or where to find closing animation options other than this one I use above. I would like the button to be colored e.g. as a Zurb success, and a fade out effect rather than the confusingly fast slide out effect. How do I go about that?
Actually I would also like the button to tightly wrap around the notice text, not take up the whole line width. Is that doable in any Zurb-idiomatic way?
Thanks!
To change the color of close button or other style, you can code the CSS like
.close-button{
color:red;
}
If you are using SASS you can customize the variables.
http://foundation.zurb.com/sites/docs/close-button.html#sass-reference
The animations you can use are:
slide-in-down
slide-in-left
slide-in-up
slide-in-right
slide-out-down
slide-out-left
slide-out-up
slide-out-right
fade-in
fade-out
hinge-in-from-top
hinge-in-from-right
hinge-in-from-bottom
hinge-in-from-left
hinge-in-from-middle-x
hinge-in-from-middle-y
hinge-out-from-top
hinge-out-from-right
hinge-out-from-bottom
hinge-out-from-left
hinge-out-from-middle-x
hinge-out-from-middle-y
scale-in-up
scale-in-down
scale-out-up
scale-out-down
spin-in
spin-out
spin-in-ccw
spin-out-ccw
http://foundation.zurb.com/sites/docs/motion-ui.html
You can add the callout to a column 1 to 12 wide (although 12 wide is what you already have with the callout on its own). Here I have added it to a 2 wide column. By removing the slide-out method it uses the default fade-out.
<div class="row">
<div class="small-2 columns">
<div class="success callout" data-closable>
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
</div>
</div>
manually clicking on tab(anchor tag) its displaying drop down menu(unordered list) with watir element is locating but drop down menu is not displaying
HTML
<ul>
<li id="NetworkAnalysisTabPanel__ext-comp-1038" class=" x-tab-strip-menuable x-tab-strip-active ">
<a class="x-tab-strip-close" onclick="return false;"></a>
<a class="x-tab-strip-menu" onclick="return false;"></a>
<a></a>
<a class="x-tab-right" onclick="return false;" href=""></a>
</li>
</ul>
Tried the following line of code to click on the tab
$ff.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).fire_event("onClick")
I am using watir 1.6.6 version
Firstly since your HTML sample that you provided does not include the element you are using in the command you attmepted, it's hard to know where that might be going wrong. Secondly since the code you provided does have a div with a unique ID present, why not start there instead of with an outer container.
I think the problem is that you are using
.fire_event("onCLick")
However the code is monitoring for an event named "onclick" (all lower case)
Try using
.fire_event("onclick")
or if you have not already, perhaps just
.click
and see if that works for you
Also, I'd seriously recommend you upgrade to a more current version of Watir.. 1.6.6 is pretty behind the times.
Update: that html code is starting to look very familiar to me, if this is the same basic control from the other two questions you've posted so far, then try firing the 'onmousedown' event against the element that invokes the menu and see if that works