How can I get child element of a dropdown using nightwatch js. here is my code
<ul id="ddEmp" class="ng-scope">
<li class="ng-scope active">Emp 1</li>
<li class="ng-scope">Emp 2</li>
<li class="ng-scope">Emp 3</li>
</ul>
I want to get "Emp 3".
you can use the nth-child() css selector. In your case it would be ul#ddEmp li:nth-child(3)
You can also use xpath and look for the text in the li:
.useXpath().click('//li[text()="Emp 3"]')
Related
<ul class = "items">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
What is wrong with following code, unit test is failing?
<script>
d3.select('li:nth-child(2n)').html('Hello World').style('color', 'Blue').classed('big', true);
</script>
As Hubert Grzeskowiak said your code is working fine. Just follow the order in which you are trying to manipulate
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<ul class = "items">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
<script>
d3.select('li:nth-child(2n)').html('Hello World').style('color', 'Blue').classed('big', true);
</script>
Your code should be like this, if you want to update the 3rd li item.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<ul class = "items">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
<script>
d3.select('li:nth-child(3)').html('Hello World').style('color', 'blue').classed('big', true);
</script>
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/
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
I have document
<ul class="section">
<li>
<ul class="section">
<li><span>world</span></li>
</ul>
<span>hello</span>
</li>
<li><span>!</span></li>
</ul>
I want to select li on first level, and i have xpath expression:
//ul[#class="section"]/li
But it selects all li.
One way to do that can be: ul[#class="section" and not(parent::li)]/li
Let's say I have a basic static HTML page that contains a nested unordered list:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-item 2.1</li>
<li>Sub-item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
That's valid XHTML. Great.
Now, I'm applying Thymeleaf's internationalization via th:text (if it matters, and I don't believe it does, this is inside a Spring application).
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li th:text="#{mypage.item2}">Item 2
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
Assuming that I have my mypage.properties set up and working properly, once the above is processed by Thymeleaf, the result will display as:
<ul>
<li>Item 1</li>
<li>Item 2
</li>
<li>Item 3</li>
</ul>
Where did my sub-items go for Item 2, and how can I get them back while having them i18n'ed separately? I know about th:utext, but I do not want to have mypage.item2 contain the full HTML for the entire sublist. Is it possible?
Edit: It is possible to get what I'm looking for if I change my code to the following, but then it is no longer valid XHTML. I am looking for a valid XHTML solution.
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li th:text="#{mypage.item2}">Item 2</li>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
First for understanding: th:text change everything till the tag is closed, so the behavior is not a surprise.
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li><span th:text="#{mypage.item2}" th:remove="tag">Item 2</span>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
should work or with newer version you could use th:block
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li><th:block th:text="#{mypage.item2}">Item 2</th:block>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
With th:inline it should be possible to avoid the extra node th:block.