I am using bootstrap dropdown in my angularjs application. But unable to get the dropdown. Here is my code:
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Alert Name <span class="label label-default">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-primary">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-success">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-info">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-warning">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-danger">Alert Badge</span>
</li>
<li class="divider"></li>
<li>
View All
</li>
</ul>
</li>
I tried removing href="javascript:void(0)" and instead I used data-target.
I am not getting the dropdown.
thanks.
Did you include bootstrap.js and 'jquery'? Please add these files bottom of your page and reload the page.
Related
I have a HTML code as mentioned below with UL tag, and I wanted to click the UL tag Manage -> Channel using Selenium Webdriver. To do that I have written the below code in java but it is not working, infact no error is throwing but page is getting opened. Please help.
HTML
<ul class="adb-primary_nav--items adb-layout-default">
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link en" href="../">
<img class="adb-primary_nav--image" src="https://d33na3ni6eqf5j.cloudfront.net/marketplace_logo/img1474715110198223685.png?7ef040694410736c21450bea763bb661" alt="Vodafone Group">
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="myapps" href="../myapps">
MyApps
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="shop" href="../home">
Marketplace
</a>
</li>
<li class="adb-primary_nav--item"><a class="adb-primary_nav--link" id="developer" href="../cms/home">Developer</a></li>
<li class="adb-primary_nav--item js-drainable-menu">
<div class="adb-context_menu adb-js-context_menu">
<a id="manage" class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link admin-item selected" role="button" tabindex="0">Manage</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" href="../corporate/home">Corporate</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content selected" href="./marketplace">Channel</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" id="account" href="../account/home">Account</a></li>
</ul>
</div>
</div>
</li>
<li class="adb-primary_nav--item adb-primary_nav--item__right">
<div class="adb-context_menu adb-js-context_menu" data-placement="right">
<a class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link" role="button" tabindex="0">testchannel user</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myProfile" href="../profiles/5944276">My Profile</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myCompany" href="../companies/219288">My Company</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="mySettings" href="../settings">My Settings</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="logout" href="../logout">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
Java Code
Configuration_file var = new Configuration_file();
System.setProperty("webdriver.chrome.driver", "C:\\Users\\gur29175\\workspace\\SAAS\\jars\\chromedriver.exe");
WebDriver firefox_dri = new ChromeDriver();
firefox_dri.get(var.env_URL + "/home");
firefox_dri.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS);
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
driver.findElement(By.xpath("//a[#id='manage']")).click()
driver.findElement(By.xpath("//ul[#class='adb-stack']/li[2]")).click()
In case of a listbox, you need to get the list of elements and iterate over it to choose the required element.
Please share the screenshot of the page with dropdowns. Will be able to guide you with the code.
You can replace
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
with
firefox_dri.findElement(By.linkText("Channel")).click();
Try it
//ul[#class='adb-stack']/li[#class='adb-stack--item']/a[contains(text(),'Corporate')].click();
The following is the partial view that I'm using. Somehow the 'ng-scope' class is not added automatically to every HTML tag. Could someone tell me what might be the cause of this? I know angular.js adds class conditionally but I don't know how to fix this.
<div class="my-photo-header">
<div class="container">
<a class="navbar-brand my-navbar-brand">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<form class="navbar-form my-navbar-form navbar-left" role="search">
<div>
<input id="photo-title" type="text" class="form-control" placeholder="Untitled"
title="Edit your photo title here." value="TITLE">
</div>
</form>
<ul id="photo-title-header" class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
File <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a>Save</a>
</li>
<li>
<a ng-click="vm.haha()">Upload</a>
<input type="file" upload-image="uploadImage"/>
</li>
<li><a>Open</a></li>
<li><a>Invite</a></li>
<li role="separator" class="divider"></li>
<li><a>Export as<span class="caret"></span></a></li>
<li><a>Print</a></li>
</ul>
</li>
<!-- Please change TODO to display the number, and maybe change style to not be a tab -->
<li role="listitem"><a>{{TODO}} revisions</a></li>
<li>Logout</li>
</ul>
</div>
</div>
The CSS selector I'm using is
#menu-container > div.navbar-collapse.collapse.bs-navbar-collapse > ul:nth-child(1) > li.dropdown.open > ul > li:nth-child(1) > a > span.menu-label
Is there a way to make it shorter?
HTML
<div id="menu-container" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">SmartStudio</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Save</span>
<span class="pull-right">⌘ S</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Fonts</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Publish</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Edit</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Undo</span>
<span class="pull-right">⌘ Z</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Redo</span>
<span class="pull-right">⇧ ⌘ Z</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Cut</span>
<span class="pull-right">⌘ X</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Copy</span>
<span class="pull-right">⌘ C</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Paste</span>
<span class="pull-right">⌘ V</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span> its too long to use in code. Is there a way to make it shorter in selenium web driver?
<span class="menu-label">Paste in Place</span>
<span class="pull-right">⇧ ⌘ V</span>
</a>
</li>
<li class="divider"><span></span></li>
<li class="dropdown-submenu">
<a>
<span class="pull-left"></span>
<span class="menu-label">Arrange</span>
</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring to Front</span>
<span class="pull-right">⇧ ⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring Forward</span>
<span class="pull-right">⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send Backward</span>
<span class="pull-right">⌘ ↓</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send to Back</span>
<span class="pull-right">⇧ ⌘ ↓</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">View</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Panels</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Off Page Dimming</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Panel</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Project</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Properties</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Design</span>
</a>
</li>
</ul>
</li>
<li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Help</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Support Resources</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Rate Us</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Suggest a Feature</span>
</a>
I think you've got several options... I'll list a couple that you can try and see if they work for you.
The super simplest way is to use the link text of the menu and then the submenu items. It may or may not work... one issue may be the uniqueness of the "Help" link on the page, there may be more than one. It looks like you will have to click the Help menu to expose the submenu that contains the "Support Resources" link.
String menuName = "Help";
String submenuName = "Support Resources";
driver.findElement(By.linkText(menuName)).click();
driver.findElement(By.linkText(submenuName)).click();
If that doesn't work, this should... or at least point you in the right direction. You will need to loop through the menus looking for the correct link text, click on it exposing the submenu, loop through the submenus looking for the correct link text, and then click on it.
String menuName = "Help";
String submenuName = "Support Resources";
List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container > div > ul.nav.navbar-nav > li.dropdown"));
// List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container li.dropdown")); // possible shorter alternative
for (WebElement menu : menus)
{
if (menu.getText().equals(menuName))
{
menu.click();
List<WebElement> submenus = menu.findElements(By.cssSelector("span.menu-label"));
for (WebElement submenu : submenus)
{
if (submenu.getText().equals(submenuName))
{
submenu.click();
break;
}
}
break;
}
}
This is impossible to figure out for sure without seeing the HTML you're referring to. However, it looks like you may be able to get away with this:
#menu-container span.menu-label
It looks like you're acquainted with the > operator, which selects a direct child of an element. The operator (a space) selects any descendant of an element.
This only works if there are no other spans with a class of menu-label inside of the element with the ID of menu-container. I'm assuming this is the case.
If you want a more certain answer, you'll need to provide a complete HTML file.
EDIT: Okay, now that you've provided your HTML, it's very clear what the problem is: your HTML is using styling classes, but no descriptive classes. You have two choices: adding more specific classes to your HTML elements, or just dealing with your very long selector. There are no other options.
Of course, if you choose the second option, you should store that CSS selector in a variable to give it a useful name, make it reusable, and make it easy to change when needed.
Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>
Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.
i m in elements/navigation.ctp , in the navbar i put a condition if :
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell">
<?php
//$this->loadModel("Location");
if($this->Session->read('auth.Location.status')==0):
echo '<span class="glyphicon glyphicon-exclamation-sign" style="color:red;">
</span>';
?>
<?php endif;?>
</i>
<b class="caret">
</b>
</a>
<ul class="dropdown-menu alert-dropdown">
<li>
<span class="label label-danger">Notificaion</span>
</li>
<li class="divider"></li>
<li>
View All
</li>
</ul>
</li>
i went when the field status in Location table is == 0 it displays a notification icon, and when it is 1 it shows nothing, but the problem i think that i have put the false code ,
Help :'(