Div wrap in Thymeleaf - java

I'm trying to wrap my list with div, here is my Thymeleaf structure:
<th:block th:if="${predStatus.namePrem}">
<div class="Holder">
<ul id="holder" class="price-table__info">
<li>
<p class="exam1" th:text="#{exam2}"></p>
</li>
</ul>
</th:block>
<ul id="holder" class="price-table__info">
<li>
<p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
<p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
</li>
</ul>
</div>
What I trying to achieve is this structure
<div class="Holder">
<ul id="holder" class="price-table__info">
<li>
<p class="top">Title 1</p>
</li>
</ul>
<ul id="holder" class="price-table__info">
<li>
<p class="top">Title 2</p>
</li>
</ul>
</div>
Can anybody help me?

Can you try the following?
Just put the condition in the div
<div class="Holder" th:if="${predStatus.namePrem}">
<ul id="holder" class="price-table__info">
<li>
<p class="exam1" th:text="#{exam2}"></p>
</li>
</ul>
<ul id="holder" class="price-table__info">
<li>
<p th:unless="${predStatus.kom}" class="top" th:text="#{usp}"></p>
<p th:if="${predStatus.kom}" class="top" th:text="#{usp1}"></p>
</li>
</ul>
</div>

Related

I Need To Scroll Inside a Drop Down Box

In Selenium, i Was Automating, But in That Drop down Menu i need to Click on The Element Which is Hidden Down.
It scrolls whole page down i want only specific dropdown scrolled down not page.
HTML Code For The Full Div :
<ul class="dropdown-menu drop_Loc" role="menu" style="display: none;" xpath="1"> <li>
<a href="carle_place.aspx" target="_self">
<span class="icon-fort icon-left" style="font-size: 40px;padding: 0px 8px;"></span> <span class="nav_icon_heading">Carle Place</span>
</a>
</li>
<li>
<a href="Selling-a-car-cutler-bay.aspx" target="_self">
<span class="icon2-cutlerbay icon-left" style="font-size: 24px;padding: 7px 8px;"></span>
<span class="nav_icon_heading">Cutler Bay</span>
</a>
</li>
<li>
<a href="Daytona.aspx" target="_self">
<span class="icon-daytona icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Daytona</span>
</a>
</li>
<li>
<a href="Fort_lauderdale.aspx" target="_self">
<span class="icon-fort icon-left" style="font-size: 40px;padding: 0 8px"></span> <span class="nav_icon_heading">Fort Lauderdale</span>
</a>
</li>
<li>
<a href="Sell-my-car-longwood.aspx" target="_self">
<span class="icon-orlando icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Longwood</span>
</a>
</li>
<li>
<a href="Melbourne.aspx" target="_self">
<span class="icon-melbourne icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Melbourne</span>
</a>
</li>
<li>
<a href="miami.aspx" target="_self">
<span class="icon-miami icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Miami</span>
</a>
</li>
<li>
<a href="Orlando.aspx" target="_self">
<span class="icon-orlando icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Orlando</span>
</a>
</li>
<li>
<a href="St_James.aspx" target="_self">
<span class="icon-daytona icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">St James</span>
</a>
</li>
<li>
<a href="Treasure_coast.aspx" target="_self">
<span class="icon-treasure_coast icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Stuart</span>
</a>
</li>
<li>
<a href="Tampa.aspx" target="_self">
<span class="icon-treasure_coast icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">Tampa</span>
</a>
</li>
<li>
<a id="last-child-location" href="West_palm_beach.aspx" target="_self">
<span class="icon-palm_beach icon-left" style="font-size: 40px;padding: 0 8px"></span>
<span class="nav_icon_heading">West Palm Beach</span>
</a>
</li>
</ul>
i Tried With These Code,
By Stuart = By.xpath("/html[1]/body[1]/div[1]/nav[1]/div[1]/div[2]/ul[1]/li[2]/ul[1]/li[10]/a[1]/span[2]");
JavascriptExecutor je = (JavascriptExecutor) driver;
WebElement element = driver.findElement(Stuart);
je.executeScript("arguments[0].scrollIntoView(true);",element);
Thread.sleep(4000);
The Above Code is Working,But it is Scrolling The Dropdown aswell as Webpage Also.
Please Sort Me out This Guys.
Your code is right i didn't find any problem in your code it should scroll till that element is visible.
Don't use absolute xpath, it's good practice to always use dynamic xpaths.
Please try below code,
browser.executeScript('window.scrollTo(0,0);').then(function () {
page.saveButton.click();
})
You can also use action class of selenium for scroll,
for that you will need to import it.
import org.openqa.selenium.interactions.Actions;
WebElement menuItem = Driver.findElement(menuItemPath);
Actions action = new Actions(Driver);
action.moveToElement(menuItem);
action.perform();
menuItem.click();

Bootstrap3 nav-bar fixed to the top of the page is blocking the top content of the page below the bar, how do I fix this?

In the image below you will see that my navbar is at the top of the page however it is slightly covering the heading that is supposed to be beneath it. How do I fix this?
My code for the navigation bar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="userProfile1">
<img alt="Brand"">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Profile</li>
<li class="dropdown">
Menu <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
I added the following to my CSS file but it didn't change anything:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
You can always give your heading a DIV tag and give that div a margin-top.
CSS:
.heading-text {
margin-top: 100px;
}
HTML:
<div class="heading-text">
<h1>My Title</h1>
</div>

xPath element location - selenium

Have following source on the webpage , what I want is to click on the button which is under class fa fa-repeat. Tried to use xpath = "//*[#id=\"accountsList\"//following-sibling::i[#class='fa fa-repeat']" but it doesn't work. Could anyone help/explain me why ? And what could be the best alternative to locate such elements (not necessary via xpath, could be css selector as well) ...
My HTML code is as below:
<li class="list-group-item">
<div class="row account-item">
<div class="col-xs-10">
<span class="label label-danger account-status">O<br>F<br>F</span>
<div><b>assssss</b></div>
<div>company</div>
</div>
<div class="col-xs-2 text-right">
<i data-account="ababa" class="fa fa-repeat"></i>
<i class="account-options fa fa-ellipsis-v" data-toggle="dropdown"></i>
<ul class="dropdown-menu" role="menu">
<li>
<a data-account="fds" class="account-option toggle-active">
<i class="fa fa-play"></i> Start </a>
</li>
</ul>
</div>
</div>
</li>
The target i element is not sibling of *[#id='accountsList'] but descendant :
//*[#id='accountsList']//i[#class='fa fa-repeat']
or using more specific path :
//*[#id='accountsList']/div/div/i[#class='fa fa-repeat']

How to programmatically draw blocks of N elements using an Iterator

Let's say, I want to achieve this with Struts iterator:
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client1.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client4.png"></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client4.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client1.png"></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"><img src="images/sample/clients/client1.png"></li>
<li class="span3"><img src="images/sample/clients/client2.png"></li>
<li class="span3"><img src="images/sample/clients/client3.png"></li>
<li class="span3"><img src="images/sample/clients/client4.png"></li>
</ul>
</div>
</div>
</div>
This is what I have tried:
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" begin="0" end="3">
<li class="span3"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></li>
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" begin="3" end="7">
<li class="span3"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></li>
</ul>
</div>
</div>
</div>
I want my struts iterator to create item classes with 4 list items each. Once a class is filled with 4 list items, the iterator must create another item class. How can I achieve this?
Thank you
You can achieve this pretty easily by using the module operator (as described in this answer):
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<ul class="thumbnails">
<s:iterator value="members" status="ctr" >
<li class="span3">
<a href="#">
<img src="<s:property value='imageUrlPrefix' />
<s:property value='imageName'>" />
</a>
</li>
<s:if test="%{#ctr.count % 4 == 0}" >
</ul>
</div>
</div>
<div class="item">
<div class="row-fluid">
<ul class="thumbnails">
</s:if>
</s:iterator>
</ul>
</div>
</div>
</div>
Note: to set the active class to the right item, use an <s:if> inside the iterator, and another one outside to check if it's the first element to be active.

Selenium Webdriver - How to select element in CSS Menu

I do not know how to click a menu item on a CSS dropdown menu.
The structure of the menu looks like this:
<ul id="nav" class="clearfix" role="navigation">
<li>
<li class="navMenu navActive">
Allfinanzberatung
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a> <- I want to Select this Menu Point
</div>
</li>
</ul>
<li class=" subMenuPoint">
<li class=" subMenuPoint">
<li class="last subMenuPoint">
</ul>
I've tried it with the following code but it doesn't work: (Eclipse Junit)
WebElement elems=driver.findElement(By.linkText("Wie ich Sie unterstütze"));//Menu Item
WebElement elems1=driver.findElement(By.xpath("//li[#nav']/a"));//Menu
Actions builder = new Actions(driver);
Actions hoverOverRegistrar = builder.moveToElement(elems1);
hoverOverRegistrar.perform();
elems.click();//at last Menu Item Click
First of all, thank you all,
but unfortunately it still does not work properly.
here is again the code for the menu.
<ul id="nav" class="clearfix" role="navigation">
<li class="navMenu">
beratung
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/wie-ich-sie-berate/">Wie ich Sie berate</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/produktwelt/">Produktwelt</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/auszeichnungen/">Auszeichnungen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/premium-partner/">Premium-Partner</a>
</div>
</li>
<li class="last subMenuPoint">
<div class="left">
<a class="right" href="/test.user/beratung/ihr-allfinanzcheck/">Ihr Allfinanzcheck</a>
</div>
</li>
</ul>
</li>
<li>
<img alt="" src="/test.user/javax.faces.resource/pic_bg_main_menu_separator.png.xhtml?ln=images/frontend/menus" />
</li>
<li class="navMenu">
Karriere
<ul class="subMenu" role="navigation">
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihre-perspektiven/">Ihre Perspektiven</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-neuer-beruf/">Ihr neuer Beruf</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-karrierefahrplan/">Ihr Karrierefahrplan</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/ihr-karrierecheck/">Ihr Karrierecheck</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/was-andere-sagen/">Was andere sagen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/auszeichnungen/">Auszeichnungen</a>
</div>
</li>
<li class=" subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/freie-stellen/">Freie Stellen</a>
</div>
</li>
<li class="last subMenuPoint">
<div class="left">
<a class="right" href="/test.user/karriere/im-falschen-film/">Führen Sie selbst Regie</a>
</div>
</li>
</ul>
</li>
</ul>
This code selects me the fourth element so "karriere" thats good driver.findElement(By.cssSelector("#nav > li:nth-child(4) a")).click();
But unfortunately I could not select the second element of it -> Karriere -> Ihr neuer Beruf
I try this but it dosnt work
driver.findElement(By.cssSelector("#nav > li:nth-child(4) li:nth-child(2) a")).click();
What is the error?
Try
driver.findElement(By.cssSelector(".navMenu a")).click();
This finds the elements with class navMenu, then selects the first child that is an html <a> element (aka your link) and clicks it.
Css selector doesnot support cross platform browsers, you have to use xpath.
if you want to select "Wie ich Sie unterstütze"
then use
element= driver.findelement(By.xpath("//ul[#class='clearfix']/li/ul/li[1]/div/a"));
element.click();
if you want to select "Wie ich Sie berate"
element= driver.findelement(By.xpath("//ul[#class='clearfix']/li/ul/li[1]/div/a"));
element.click();

Categories