i have a problem with Xpath.
I have that :
<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="1 (fix but random)" aria-live="off" style="overflow: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item"></li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">standard 2014</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" id="1 (fix but random)__PackageId_option_selected" aria-selected="true">standard couple 2014</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Gratuit</li>
</ul>
<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="2 (fix but random)" aria-live="off" style="overflow: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item"></li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">standard 2014</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" id="1 (fix but random)__PackageId_option_selected" aria-selected="true">standard couple 2014</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Gratuit</li>
</ul>
<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="RANDOM" aria-live="off" style="overflow: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item"></li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">standard 2014</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" id="1 RANDOM__PackageId_option_selected" aria-selected="true">standard couple 2014</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Gratuit</li>
</ul>
My question is simple : how can i click with casper on last < li > with standard 2014 ?
I try that :
var x = require('casper').selectXPath;
this.click(x('//*ul[#class="k-list k-reset"]/li[text() = "standard 2014"]'))
But casperjs don't find.
Thank's for your help !
Try surrounding your xpath in parentheses and adding [last()] to the end. Like (xpath)[last()]
You should also remove the asterisk from //*ul
It should look like this:
this.click(x('(//ul[#class="k-list k-reset"]/li[text() = "standard 2014"])[last()]'))
You should try to check whether your X-path is valid or not in console of browser. like
$x('//a[contains(text(),"Cancel")]')
Related
I click on the input field and popup with items list appears. But I cannot click on any item
cy.get('#field')
.click({force:true}) //popup with items list appers
cy.get('.ant-select-dropdown-menu')
.should('be.visible')
.contains('Item123', { timeout: 20000})
.click({force:true})
Error:
Timed out retrying: Expected to find content: 'Item123' within the element: <ul.ant-select-dropdown-menu> but never did.
I use this html.
I click on the field and popup appears with items list. I want to click on the any item.
html:
<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
<div>
<div class="ant-select-dropdown ant-select-dropdown-hidden" style="width: 180px; left: 883px; top: 477px;">
<div id="753a81bb-579c-4483-f7e5-5527f7c01f3a" style="overflow: auto; transform: translateZ(0px);">
<ul role="listbox" class="ant-select-dropdown-menu ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item1 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item12 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item123 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item1234 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
</ul>
</div></div></div>
You can use eq() to get DOM element at a specific index in an array of elements:
cy.get('li.ant-select-dropdown-menu-item', {
timeout: 20000
}).eq(2).click({
force: true
})
I have a navbar with center aligned menu items, of which some are dropdown-menus. The navbar and dropdown menu are 100% width but I would like the drop-down menu to be say 60% width and still centre aligned.
HTML:
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #8B0000;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown megamenu-li">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-1" data-toggle="dropdown">
Drop down
</a>
<div class="dropdown-menu megamenu" aria-labelledby="navitem-1">
<div class="row">
<div class="col-sm-6 col-lg-3">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-sm-6 col-lg-3">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Item
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Item
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS :
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
}
Please see demo here: https://jsfiddle.net/stackoverflow123/53fn2kop/
Reducing the .megamenu width reduces the downdown-menu panel as expected, but it stops it being centrally aligned.
Thank you in advance
desired layout
I managed to approach your goal (if I understood right) applying mainly the next style to the dropdown-menu, but only on the specific bootstrap break-point (LG), and removing all of your style:
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
Also, I removed the outer row and col-12 and replaced the container by container-fluid, and make some minor changes to the items on the dropdown-menu so they look centered. You can check it below:
#media (min-width: 992px)
{
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #8B0000;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-1" data-toggle="dropdown">
Drop down
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-1">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-2" data-toggle="dropdown">
Drop down 2
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-2">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
Item
</li>
<li class="nav-item">
Item
</li>
<li class="nav-item">
Item 333
</li>
<li class="nav-item">
Item 99999
</li>
</ul>
</div>
</nav>
</div>
Building off of #Shidersz approach, I wanted a full-width centered nav bar with columns. I used bootstrap 4 and the added a custom-dropdown class. This requires the navbar to be fixed-top or scrolling doesn't have the expected behavior.
.custom-dropdown {
position: fixed !important;
width: 100vw;
left: 0vw !important;
top: 50px !important;
}
<nav class="navbar fixed-top navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-5">
<div class="container">
<a class="navbar-brand">Full Width Awesomness</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark">Top Sellers</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu custom-dropdown border-0 border-bottom text-center" aria-labelledby="navbarDropdown">
<div class="row">
<div class="col-sm-3">
<label class="font-weight-bold">Item 1 </label>
<a class="dropdown-item" href="#">Top Sellers</a>
<a class="dropdown-item" href="#">Hot and New</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-3">
<label>DVDs </label>
<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 class="col-sm-3">
<label>Books </label>
<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 class="col-sm-3">
<label>CDs </label>
<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>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-2 pt-5">
<div class="row" style="background-color: pink; height:800px;">
CONTENT
</div>
</div>
fiddle here:
https://jsfiddle.net/mgervasoni/71c0yub4/24/
I have gotten a partial view to work in which I am binding a kendo dropdownlist to a remote datasource. I reuse this partial 5 times in my view. I pass the value to the Controller method in order to dynamically bind the data for each instance of the control (just like it was done in ascx file).
My problem is that for 2 of these dropdownlists, the entire list comes back as selected. I am not binding the data yet with a model view data that comes from an instance of the model, just a blank form at this point.
Here is one of my rendered HTML kendo dropdownlists that has the issue:
<ul tabindex="-1" class="k-list k-reset" id="Title_listbox" role="listbox" aria-hidden="true" aria-live="off" data-role="staticlist" unselectable="on">
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="0"></li>
<li tabindex="-1" class="k-item k-state-selected k-state-hover" role="option" aria-selected="true" unselectable="on" data-offset-index="1">Attorney</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="2">CEO</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="3">CFI</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="4">CFO</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="5">Chairman</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="6">Chairperson</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="7">Consultant</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="8">COO</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="9">Coordinator</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="10">CPA</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="11">Director</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="12">EVP</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="13">Executive</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="14">Judge</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="15">Manager</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="16">Owner</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="17">Partner</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="18">President</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="19">Principal</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="20">Superintendant</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="21">Supervisor</li>
<li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="22">Treasurer</li>
<li tabindex="-1" class="k-item k-state-focused" id="970fd67b-52fe-4519-b2f8-36cae7068b32" role="option" aria-selected="false" unselectable="on" data-offset-index="23">Vice President</li>
Here is my partial view code:
<script type="text/javascript">
function LookupInfo(lookupID) { return { LookupTypeID: lookupID }; }
function LookupInfo_DataBound() { this.value("#Model.SelectedLookupID"); }
</script>
<div class="editor-field">
#(Html.Kendo().DropDownList()
.Name(#Model.LookupName)
.HtmlAttributes(new { #id = Model.LookupName.ToString(), #class = "myclass" })
.DataTextField("Name")
.DataValueField("Value")
.SelectedIndex(#Model.SelectedLookupID)
.Events(events => events.DataBound("LookupInfo_DataBound"))
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetLookup", "Contact").Data("LookupInfo("+#Model.LookupTypeID+")")
)
)
)
</div>
I tried supplying .SelectedIndex(0) but that did not work!
The event call is doing at least one good this, in that the rendered result now doesn't show the last item in the list as the selected item.
I do not what a solution for using jQuery to "fix" the problem.
Didn't post my controller code because it is irrelevant here. Data is binding as expected in all 5 cases, except that with two of the lists, all the items are selected.
I'm using jqGrid JS 5.3.0 with styleUI set to Bootstrap. The grid displays fine without bootstrap tabs, but with this html (below copied from getbootstrap.com with mygrid "embedded") the content area is blank with no grid.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div><table id="mygrid"></table><div id="mygrid_pager"></div></div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
How can I make it work inside a "tab-pane"? TIA.
(can't include javascript code of creating "mygrid" right now)
You need to change your code from
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div><table id="mygrid"></table>
to
<div class="tab-pane fade in" id="home" role="tabpanel" aria-labelledby="home-tab"> <table id="mygrid"></table></div>
adding the in class to your #home will show it on load (judging from <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> you want it to show on load)
and moving <table id="mygrid"></table> into div#home will show your grid inside the tab.
could anyone help me adding this for navigating threw tabs. I want it to have some kind of loader just for the look.
http://jsfiddle.net/3KAnM/33/ loader
tabs example:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><i class="fa fa-globe"></i> <span>NORTH AMERICA</span></li>
<li role="presentation"><i class="fa fa-globe"></i> <span>EUROPE</span></li>
<li role="presentation" class="unverifiedna"><i class="fa fa-globe"></i> <span>NA UNVERIFIED</span></li>
<li role="presentation" class="unverifiedeuw"><i class="fa fa-globe"></i> <span>EUW UNVERIFIED</span></li>
<li role="presentation" class="pbe"><i class="fa fa-globe"></i> <span>PBE</span></li>