I just wanted to try out the basic prime faces component <p:steps> from the prime faces showcase page:
https://www.primefaces.org/showcase/ui/menu/steps.xhtml
however, it does not work as expected. I copied the example from the page in my project into a separate facelets file.
But, instead of blue circles, as shown on the showcase page, I see grey rectangles:
My facelet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<f:facet name="first">
<style type="text/css">
body .ui-steps .ui-steps-item {
width: 25%;
}
body .ui-state-highlight {
text-shadow: none !important;
}
body .ui-steps.custom {
margin-bottom: 30px;
}
body .ui-steps.custom .ui-steps-item .ui-menuitem-link {
height: 10px;
padding: 0 1em;
overflow: visible;
border: 1px solid #c8c8c8;
display: block;
background-color: #FFFFFF;
}
body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-number
{
background-color: #0081c2;
color: #FFFFFF;
display: inline-block;
width: 30px;
border-radius: 10px;
margin-top: -10px;
margin-bottom: 10px;
position: relative;
top: -3px;
}
body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-title {
margin-top: -6px;
}
body .ui-steps.custom .ui-steps-item.ui-state-highlight .ui-menuitem-link .ui-steps-title
{
color: #555;
}
</style>
</f:facet>
<h3 style="margin-top: 0">Basic</h3>
<p:steps>
<p:menuitem value="Personal" />
<p:menuitem value="Seat Selection" />
<p:menuitem value="Payment" />
<p:menuitem value="Confirmation" />
</p:steps>
</h:body>
</html>
What I see in my browser is shown below:
What I am supposed to see accoroding to the PrimeFaces documentation is also shown below:
Try using the Interactive menu steps:
<p:steps activeIndex="1" styleClass="custom" readonly="false">
<p:menuitem value="Personal" url="#"/>
<p:menuitem value="Seat Selection" url="#"/>
<p:menuitem value="Payment" url="#"/>
<p:menuitem value="Confirmation" url="#"/>
</p:steps>
And place the CSS inside h:head(not compulsory) as:
<h:head>
<style type="text/css">
body .ui-steps .ui-steps-item {
width: 25%;
}
body .ui-state-highlight {
text-shadow: none !important;
}
body .ui-steps.custom {
margin-bottom: 30px;
}
body .ui-steps.custom .ui-steps-item .ui-menuitem-link {
height: 10px;
padding: 0 1em;
overflow: visible;
border: 1px solid #c8c8c8;
display: block;
background-color: #FFFFFF;
}
body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-number
{
background-color: #0081c2;
color: #FFFFFF;
display: inline-block;
width: 30px;
border-radius: 10px;
margin-top: -10px;
margin-bottom: 10px;
position: relative;
top: -3px;
}
body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-title {
margin-top: -6px;
}
body .ui-steps.custom .ui-steps-item.ui-state-highlight .ui-menuitem-link .ui-steps-title
{
color: #555;
}
</style>
</h:head>
This approach should work.
Related
i tested the following responsive menu and it does not open with an iPhone 6 Safari:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Hamburger-Menü Test</title>
<style>
*,::before,::after{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
body {
margin: 0;
font-size:100%;
background: #f6f8f9;
}
nav {
display: flex;
height: 80px;
width: 100%;
background: #1c3464;
align-items: center;
padding: 0 50px 0 50px;
flex-wrap: wrap;
overflow: hidden;
position: fixed;
top: 0;
z-index:200000;
border-bottom: 4px solid #9acd32;
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
position:absolute;
right:20px;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.1em;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
nav ul li a.active{
color: #111;
background: #fff;
}
nav ul li a:hover {
background:#526788;
}
nav .menu-btn img{
color: #fff;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
#media (max-width: 1200px) {
nav{
padding: 0px 10px 0px 20px;
}
.menu-btn {
position:absolute;
right:20px;
}
nav .menu-btn img{
display: block;
}
#click:checked ~ .menu-btn i:before{
content: "\f00d";
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #173460;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
z-index:200000;
}
#click:checked ~ ul{
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 1.3em;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a{
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover{
background: none;
color: cyan;
}
}
</style>
</head>
<body>
<nav >
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAIAAAAzse47AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRIiWP8//8/A+0BEx3sGLVm1Bq6WcOCSyItM+fz58/EG2RuZlqQl0OyNXv27iPeDgYGBvzZHGegSUtJkWQNHx8fHlnG0cKGdDCa0rCC0ZRGdTCa0rCC0ZQ2as2oNaPW4AMAM3MvRji4G34AAAAASUVORK5CYII=">
</label>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
Hello world!
</body>
</html>
I tested also with a few my Samsung (Android) devices (Chrome)
Also with Windows (different browsers) and it works on all of them.
Any idea, what i can add so that safari will also work?
Please help ;-(
Best wishes
Daniel
I'm trying to get text using selenium web driver and here is my code.
PYTHON SCRIPT:
Gives the output as empty string
text_value=driver.find_element_by_xpath('//*[#id="root"]/div/div/div/div[2]/div/div[3]/div[1]/div[2]/span[2]').text
print(text)
text_value=driver.find_element_by_xpath('//span[2]').text
print(text)
USING JAVASCRIPT:
Gives the output as NONE
text_value=driver.find_element_by_xpath('//*[#id="root"]/div/div/div/div[2]/div/div[3]/div[1]/div[2]/span[2]')
value=driver.execute_script('arguments[0]. textContent;',text_value)
print(value)
text_value=driver.find_element_by_xpath('//*[#id="root"]/div/div/div/div[2]/div/div[3]/div[1]/div[2]/span[2]')
value=driver.execute_script('arguments[0]. innerText;',text_value)
print(value)
EXPECT RESULT IS : 1/15
Below is the HTML CODE:
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=0,maximum-scale=1,minimum-scale=1"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet"><script type="text/javascript" async="" src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script><script src="https://cdn.ravenjs.com/3.19.1/raven.min.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.min.js"></script><title>Youplus</title><link href="/static/css/2.44e3516d.chunk.css" rel="stylesheet"><link href="/static/css/main.c166110d.chunk.css" rel="stylesheet"><script src="https://cdn.logrocket.io/logger.min.js" async=""></script><style data-emotion=""></style></head><body style="background-color: white;" class=""><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div style="height: 100%;"><div style="height: 100%;"><div style="height: 100%; background: white;"><div style="width: 100%; height: 64px; position: fixed; background: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 15px; z-index: 2;"><img src="/static/media/logo.4c1dd824.png" class="logo-study center-vertical" alt="Youplus Logo" style="position: absolute; cursor: pointer; height: 36px; padding-left: 20px;"><span class="center-vertical" style="font-family: "Open Sans"; font-size: 16px; font-weight: normal; color: rgb(101, 101, 101); position: relative; right: 12px; float: right; margin-right: 20px;">Logout</span></div><div><div class="ui stackable mobile vertically reversed equal width grid" style="margin-top: 0px;"><div class="column" style="height: 100%; z-index: 1; padding-top: 200px; margin-left: 50px;"><div style="width: 100%; height: 100%; position: relative;"><div style="position: relative; height: 100%;"><div style="width: 100%; position: relative;"><img id="studyMediaImage" class="study-media-image center-horizontal" src="https://ind-ypassets.s3.amazonaws.com/images/studies/2019-09-12_120919_PyKZG4jd2o0.jpg" style="width: 100%; max-width: inherit; height: 25vw; max-height: inherit; object-fit: scale-down; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; background: white;"><div style="margin-top: 20px;"></div></div></div></div></div><div class="computer only one wide column" style="height: 100%; z-index: 1;"><div class="center-horizontal" style="width: 1px; height: 30vw; background-color: rgb(166, 166, 166); margin-top: 150px; position: absolute;"></div></div><div class="column" style="height: 100%; bottom: 0px; right: 0px; background: white; transition: height 0.5s ease 0s;"><div style="width: 100%; margin-top: 85px; margin-bottom: 40px; position: absolute;"><div class="ui huge header" style="position: absolute; left: -110%; font-size: 20px; text-align: left; margin-top: 0px; font-family: "Open Sans"; font-weight: bold; margin-left: 0px; margin-right: 10em;">1. When you think about buying liquor at the store, what comes to mind?</div><div style="text-align: right; margin-right: 50px;"><span style="font-size: 14px; font-weight: bold; font-family: "Open Sans"; margin-right: 10px;">Question</span><span style="font-size: 14px; font-weight: bold; font-family: "Open Sans"; background: rgb(204, 204, 204); padding: 2px 6px;">1/15</span></div></div>
ATTACHING THE IMAGE HERE. CLICK HERE TO VIEW
To get the value from Span element induce WebDriverWait and visibility_of_element_located() and following xpath.Try below options.
Using Text:
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[text()='Question']/following::span[1]"))).text)
OR
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[contains(.,'Question')]/following::span[1]"))).text)
Using Attribute innerHTML:
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[contains(.,'Question')]/following::span[1]"))).get_attribute("innerHTML"))
Using Attribute textContent:
print(WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH,"//span[contains(.,'Question')]/following::span[1]"))).get_attribute("textContent"))
You need below imports to execute above code.
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
I have this Table:
.divTable{
display: table;
width: 50%;
padding-top: 100px;
padding-left: 100px;
margin-left: auto;
margin-right: auto;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
background-color: #ffffff;
width: 50%;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
width: 100%;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<ui:repeat var="customerInList" value="#{customerListController.resultMap.currentPositionResultList}"> <div class="divTableRow">
<div class="divTableCell">#{customerInList.lastName} #{customerInList.firstName}</div>
<div class="divTableCell">#{customerInList.postalStreet}
<p:commandButton id="editCustomerButton" label="+" iconPos="center" onclick="PF('editCustomerDialog').show()"/>
<br/>#{customerInList.postalCode} #{customerInList.postalCity}
<br/>#{customerInList.phoneNumber}
<br/>#{customerInList.email}
</div>
</div>
</ui:repeat>
</div>
</div>
<p:dialog widgetVar="editCustomerDialog">
</p:dialog>
And this Method
public void parseParameter(int ID){
this.ID = ID;
}
so here comes my problem.
As you can maybe already see I am trying to create a Popup to show more details about the customer. My Idea was that I could parse the Id of the customer from an Invisible div or something like this so I can get the remaining data from my database with this ID but that did not work for me.
Is there any other way to do this ?
You can use a f:setPropertyActionListener to set values to your bean from your p:commandButton then use the action event of your button to get any extra data from your DB and you can show your dialog on the oncomplete event instead of onclick so it get execute after your bean method.
<p:commandButton id="editCustomerButton" label="+" iconPos="center" action="#{customerListController.methodToGetYourRemainingData}" oncomplete="PF('editCustomerDialog').show()">
<f:setPropertyActionListener target="#{customerListController.ID}" value="#{customerInList.ID}" />
</p:commandButton>
I have the following view:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Revenue/Expenses Login</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css" />
</h:head>
<body>
<h:form id="login">
<!-- <p:graphicImage url="img/logog.JPG" width="448" height="119" /> -->
<p id="paragraph">Enter username and password.</p>
<p:outputLabel for="username" value="Username:" />
<p:inputText id="username" value="#{loginController.login.tbcodusr}"
required="true" requiredMessage="You must enter a Username." />
<p:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{loginController.login.tbpswusr}"
required="true" requiredMessage="You must enter a Password." />
<p:messages autoUpdate="true" for="usuarioPassword" />
<p:commandButton value="Login" action="#{loginController.login}" />
</h:form>
</body>
</html>
Before I did any changes to the JSF version, the CSS was working fine. But now, when I go to the screen, the CSS is acting differently. The css looks like this:
body {
font-family: Calibri;
color: #555555;
}
.mainContainer{max-width: 1000px;margin:0 auto;}
h1 {
font-weight: 300;
font-size: 32px;
margin: 0.6em 0px 0.6em 0px;
font-family: Calibri;
display:block;
}
h2 {
font-weight: 300;
font-size: 24px;
margin: 0.6em 0px 0.6em 0px;
font-family: Calibri;
text-decoration: underline;
font-style: italic;
display:block;
}
a {
color: #f20553;
text-decoration: none;
}
a:hover {
color: #D80649;
text-decoration: none;
}
/*login */
#login
{
max-width: 500px;
margin:0 auto;
}
#login p
{
font-size: 18px;
font-family: sans-serif, Arial, Helvetica;
}
#login label
{
padding-top: 0.2em;
display: block;
margin-bottom: 0.1em;
text-align: left;
color: #262060;
font-weight:bold;
font-family: sans-serif, Arial, Helvetica;
}
#login button
{
margin-top: 0.2em;
}
#login input[type='text'], #login input[type='password']
{
border:1px solid #CECECE;
font-family: sans-serif, Arial, Helvetica;
width: 100%;
font-size: 12px;
font-weight: 200;
padding: 5px;
box-sizing: border-box;
}
/* login end */
.searchLink{font-size:12px;display:block;width: 9em;}
.containers{line-height: 2;}
.containers label{display:block;}
What happened when I upgraded to JSF 2.2? I read this and followed instructions. What am I missing?
Also, when I click on the Login button, nothing happens. What is going on?
How can I keep icon shown for rich:calendar component?
I need to add another rich:calendar component, but the outputLabel hide the icon.
Code (edited) :
<h:panelGrid columns="4" styleClass="criteresSaisie"
rowClasses="critereLigne"
columnClasses="titreColonne,,titreCourtColonne,">
<h:outputLabel for="dateDeb" value="Période du" />
<rich:calendar id="dateDeb" inputSize="8"
value="#{criteresDecRgltBacking.dtDebDecRglt}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true" converterMessage="la date de début doit être au format dd/MM/yyyy">
<rich:validator/>
</rich:calendar>
<h:outputLabel for="dateFin" value="au" style="margin-left:20px;"/>
<rich:calendar id="dateFin" inputSize="8"
value="#{criteresDecRgltBacking.dtFinDecRglt}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true" converterMessage="la date de fin doit être au format dd/MM/yyyy" >
<rich:validator/>
</rich:calendar>
<f:event type="postValidate"
listener="#{rechercheDecRgltCtrl.validationPeriode}" />
</h:panelGrid>
CSS
div.rf-ac-itm {
height: auto !important;
overflow: visible;
}
div.rf-ac-itm-cnt {
height: auto !important;
overflow: visible;
}
.critereLigneAugmente td {
padding-bottom: 0px;
}
.espaceVideCalendar {
width: 10px;
}
.espaceVide {
width: 20px;
}
.espaceColonne {
width: 30px;
}
.titreColonne {
text-align: right;
white-space: nowrap;
width: 180px;
}
.titreCourtColonne {
text-align: right;
white-space: nowrap;
width: 40px;
}
.titreColonne .libelle,.titreColonne label {
padding-right: 10px;
}
.titreColonne .libelle label {
padding-right: 0px;
}
.largeurFixeCriteres{
width: 120px;
overflow: visible;
}
.criteresSaisie {
margin: 10px;
}
.largeurFixeCriteresTiers {
width: 120px;
overflow: visible;
}
.critereLigneAugmente td {
padding-bottom: 0px;
}
.finDeLigne {
width: 0px;
}
The only thing I could see that have a chance to cause problem is the classes order in columnClasses that was "titreColonne,,,titreCourtColonne,," and you changed now to "titreColonne,,titreCourtColonne,".
Previously you where trying to apply a 40px width on a rich:calendar column (titreCourtColonne was on the second rich:calendar column instead of the au column).
I recommand to change this CSS for better styling :
.titreCourtColonne {
text-align: center;
white-space: nowrap;
width: 20px;
}