I cannot find out the locator for "Scotiabank American Express Card".
Please see the code below:
<li>
<a id="inputBox" class="menulink menuhover">Scotia Mortgage</a>
<ul id="listOptions" style="overflow:visible; display:block; height:148px; z-index:414; visibility:visible; opacity:1;">
<li>
<li>
<a class="sub ">Credit Card</a>
<ul style="overflow:hidden; display:block; height:0px; z-index:415; opacity:0.0153846;">
<li class="topline">
<a class="sub">American Express</a>
<ul style="overflow:hidden; display:block; height:0px; z-index:401; opacity:0.0153846;">
<li class="topline">
<a onclick="changeValue(this, 'AmExRegular')">Scotiabank American Express Card</a>
</li>
<li>
<a onclick="changeValue(this, 'AmExGold')">Scotiabank Gold American Express Card</a>
</li>
<li class="bottomline">
<a onclick="changeValue(this, 'AmExPlatinum')">Scotiabank Platinum Amex Card</a>
</li>
</ul>
</li>
<li>
<li class="bottomline">
</ul>
</li>
<li>
<li>
<li>
<li>
<li class="bottomline">
</ul>
</li>
search by text
//a[text()='Scotiabank American Express Card']
Related
I am brand new to ASP.Net Core -- I literally started playing with it last night.
I am working on a website for a friend, and he requested a very specific layout for the menu bar at the top of the page:
Home | About | Books and Stories ▼ | Reviews | Other Projects
When I code what I think should be this functionality, I get this:
My code is here:
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
<li class="dropdown">
Books and Stories <span class="caret"></span>
<ul class="dropdown-menu text-dark">
<li><a asp-controller="BooksAndStories" asp-action="Novels">Novels</a></li>
<li><a asp-controller="BooksAndStories" asp-action="Stories">Short Stories</a></li>
<li><a asp-controller="BooksAndStories" asp-action="WIP">WIP</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Reviews" asp-action="Index">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="OtherProjects" asp-action="Index">About</a>
</li>
</ul>
Can anyone provide me with some direction? Google has been less than useful.
Thanks,
Carthax
Modify .dropdown-toggle in bootstrap.css file under wwwroot/lib/bootstrap/dist/css like below:
.dropdown-toggle {
white-space: nowrap;
display: block;
padding: 0.5rem 1rem;
}
I am using materialize css 1.0.0-rc.2. I am having issues in dropdown. Same dropdown is linked to navbar and sidenav but only one of them working and next thing is it should come below the navbar or link when hovered or clicked.What should I do please help?
I think it won't work for same dropdown structure in both Navbar and Sidebar. Making two dropdown structure can solve your problem.
<nav>
<div class="nav-wrapper">
Logo
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
<ul id="dropdown1" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul class="sidenav" id="mobile-demo">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger2" href="#" data-target="dropdown2">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
<script>
$(document).ready(function () {
$(".dropdown-trigger").dropdown({
hover: true
});
$(".dropdown-trigger2").dropdown();
$('.sidenav').sidenav();
});
</script>
I seem to be able to find the question posted on here and google about the same issue in bootstrap, but i'm not able to find answers for the same issue in Materialize
I'm new to bootstrap and everything i've tried hasn't solved it. I'd be grateful if anyone knows why it's doing this and how to override it.
Thank you!
the live page is here
i've set drop downs to fire on 'about' and 'profile'
the script:
<script>
var $ = jQuery;
(function($){
$(function(){
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false,
hover: false,
alignment: 'right',
gutter: 0,
belowOrigin: true,
});
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
nav bar:
<nav>
<div class="nav-wrapper">
<a class="brand-logo hide-on-med-and-down left" href="http://focallocal.org">Focallocal</a>
<ul class="hide-on-small-and-down left">
<li class="text-icon">
<a class="dropdown-button" href="http://about.focallocal.org" data-activates="nav-about" title="About Us">
<i class="mdi-action-info"></i>
<span>About Us</span>
</a>
</li>
<li class="text-icon">
<a href="http://news.focallocal.org/" title="Happy News">
<i class="mdi-device-brightness-high"></i>
<span>Happy News</span>
</a>
</li>
<li class="text-icon">
<a href="http://action.focallocal.org/" title="Action">
<i class="mdi-action-get-app"></i>
<span>Action Centre</span>
</a>
</li>
<li class="text-icon">
<a href="http://activities.focallocal.org" title="Activities">
<i class="mdi-maps-directions-walk"></i>
<span>Activities</span>
</a>
</li>
<li class="text-icon">
<a href="http://gather.focallocal.org/" title="Gather">
<i class="mdi-image-flare"></i>
<span> Gather </span>
</a>
</li>
<li class="text-icon">
<a href="http://shop.focallocal.org/" title="Shop">
<i class="mdi-action-shop-two"></i>
<span> Shop</span>
</a>
</li>
<li class="text-icon">
<a class="dropdown-button" href="#" data-activates="nav-projects" title="Projects">
<i class="mdi-action-info"></i>
<span>Projects</span>
</a>
</li>
</ul>
<ul class="right">
<li class="text-icon">
<a href="http://discuss.focallocal.org" target="_blank" title="Chat">
<i class="mdi-communication-dialpad"></i>
<span>Discuss</span>
</a>
</li>
<li class="text-icon">
<a href="https://trello.com/invite/b/SwMdGGcX/dbf6c3cebca7e2214ac0df3a57b1881f/build-the-movement" target="_blank" title="Missions">
<i class="mdi-content-create"></i>
<span>Missions</span>
</a>
</li>
<li class="text-icon">
<a href="#" title="coming soon">
<i class="mdi-action-perm-media"></i>
<span>Profile</span>
</a>
</li>
</ul>
<ul id="user-dropdown" class="dropdown-content">
<li>Log in</li>
<li>Register</li>
</ul>
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
dropdowns:
<ul id="nav-about" class="dropdown-content">
<li>
About Us
</li>
<li>
Hire Us
</li>
<li>
Community Values
</li>
<li>
F.A.Q
</li>
<li>
The Road to Focallocal
</li>
<li>
Will we Succeed?
</li>
<li>
Focallocal in the news
</li>
<ul id="nav-projects" class="dropdown-content">
<li>
<a href="http://action.focallocal.org/">Action Center
</a>
</li>
<li>
<a href="http://brightertomorrowmap.com/">Brighter Tomorrow Map
</a>
</li>
<li>
<a href="http://morehappiness.focallocal.org/">More Happiness
</a>
</li>
How to click on the element with the value "Policy Search", which has dynamic attributes for each users, so please help me to set the xpath for below code.
<div class="navbar-collapse collapse in">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">My Business <b class="caret"></b>
<ul class="dropdown-menu">
<li>Agent Hierarchy
</li>
<li>Pending New Business
</li>
<li>Book of Business
</li>
<li>Commissions
</li>
<li>License Renewals
</li>
<li>Trial Applications
</li>
</ul>
</li>
<li class="dropdown">Policy Search <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a tabindex="-1" href="#">Book of Business Search</a>
<ul class="dropdown-menu">
<li>Client Search
</li>
<li>Policy Search
</li>
<li>Advanced Search
</li>
</ul>
</li>
</ul>
By.xpath("//a[contains(#class="dropdown-toggle" and text()="Policy Search")]));
and if you have multiple items with same value, you can specify it like,
By.xpath("//a[contains(text()="Policy Search")][1]));
By.xpath("//a[contains(text()="Policy Search")][2]));
I am using bootstrap 3 dropdown toggle menu in my angularjs project and everything seems to be working fine but after using angular ui bootstrap (angular-ui-bootstrap.min.js) the bootstrap 3 dropdown toggle menu is not working (meaning its not opening). Does anyone had the same issue? Please help me on how to solve this.
Index.html
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="submenu">
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Find Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Create Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Update Project
</a>
</li>
</ul>
</li>
<ul>
You need to do it the Angularjs way:
Make sure to include:
Index:
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<i class="icon-double-angle-right"></i>
<a>{{choice}}</a>
</li>
</ul>
</li>
<ul>
JS:
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"Find Project",
"Create Project",
"Update Project"
];
}