We are implementing primefaces tooltip on datatable.
But tooltip postining is away from the datable row.
<p:tooltip targetPosition="bottomLeft" Delay="0" showDelay="0">
<h:outputText value="#{label.lockTime}"
style="font-weight:bold" />
<h:outputText value=": #{cert.lockTime}" />
<p:spacer width="1" height="10" />
<h:outputText value="#{cert.label} " style="font-weight:bold" />
<h:outputText value=": #{cert.userDetails}" />
</p:tooltip>
You try this
<p:tooltip />
<p:dataTable var="var" ........>
<p:column headerText="Market" >
<h:outputText value=" #{var.market}" title=" #{var.market}"
style="display:block;">
</h:outputText>
</p:column>
<p:column headerText="Value" >
<h:outputText value=" #{var.value}" title=" #{var.value}"
style="display:block;">
</h:outputText>
</p:column>
</p:dataTable>
I hope It will work.
Related
I'm trying to change the css of a basic panelgrid.
Basically I want the text of the right column on the right. This doesn't work
<p:panelGrid columns="2" style="height: 220px;width:100%;">
<f:facet name="header">
<h:outputText value="Car" />
</f:facet>
<h:outputText value="Colour:" />
<h:outputText style="text-align: right;" value="blue" />
<h:outputText value="Brand:" />
<h:outputText style="text-align: right;" value="Ferrari" />
</p:panelGrid>
Is there any way to change it ?
I have a panelgrid with 5 rows and 7 columns within and have tried to use colspan to line up the different components within the columns. I'll stick my xhtml below:
<p:panelGrid>
<p:row>
<p:column>
<p:row>
<p:column>
<p:outputLabel value="Job Status:" />
</p:column>
<p:column colspan="4">
<p:selectOneMenu value="#{myBean.jobStatus}">
f:selectItems here
</p:selectOneMenu>
</p:column>
<p:column>
<p:selectBooleanCheckbox id="cbRepetition"
value="#{myBean.isRepeatable}"
</p:selectBooleanCheckbox>
</p:column>
<p:column>
<p:outputLabel value="Terminate repetition of this job?" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Positions:" />
</p:column>
<p:column>
<p:spinner id="position1"
value="#{myBean.selectedPosition1}" />
</p:column>
<p:column>
<p:spinner id="position2"
value="#{myBean.selectedPosition2}" />
</p:column>
<p:column>
<p:spinner id="position3"
value="#{myBean.selectedPosition3}" />
</p:column>
<p:column>
<p:spinner id="position4"
value="#{myBean.selectedPosition4}" />
</p:column>
<p:column>
<p:outputLabel value="Occurrences:" />
</p:column>
<p:column>
<p:spinner id="occurrences"
value="#{myBean.selectedOccurrences}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Date/Time:" />
</p:column>
<p:column colspan="4">
<p:calendar id="dateTime" pattern="dd/MM/yyyy HH:mm"
value="#{myBean.selectedDateTime}">
</p:calendar>
</p:column>
<p:column>
<p:outputLabel value="Job Location:" />
</p:column>
<p:column>
<p:selectOneMenu id="locationDd"
value="#{myBean.selectedLocationId}">
<f:selectItem itemLabel="Select" itemValue="0" />
<f:selectItem itemLabel="Australia" itemValue="1" />
<f:selectItem itemLabel="Springfield" itemValue="2" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Comments:" />
</p:column>
<p:column colspan="6">
<p:inputTextarea />
</p:column>
</p:row>
</p:column>
</p:row>
</p:panelGrid>
I've refactored the code a little bit, for example the jobStatus selectOneMenu is actually a custom component I've created, but I'm confident this isn't the issue as it's been used elsewhere in my project without any trouble.
This panelGrid is sat within a panel within a form.
I'm hoping it is obvious what I am trying to achieve, but what I'm actually getting is as below:
I've used CSS to make the spinners smaller as they should be just big enough to fit an integer 0-9, but this has had no effect, any suggestions why things aren't dislpaying on the correct rows or things I can do to make them display as I wish?
Cheers.
I've realized I just needed to remove the initial <p:row> and <p:column> and it works fine.
Problem in icons layout and positions in rtl.
Previous page icon should be swapped with next page icon as the direction in rtl is the opposite of ltr.
<p:dataTable id="dataTable" var="myRequest" widgetVar="requestsTable" value="#{searchRequestsBB.model}" rows="10" paginator="true"
paginatorPosition="bottom" rowsPerPageTemplate="10,50,100" selectionMode="single" selection="#{searchRequestsBB.selectedRequest}" rowKey="#{myRequest.id}" emptyMessage="#{langu['EMPTY_DATA_TABLE']}" lazy="true" resizableColumns="true">
<p:ajax event="rowSelect" update=":content:detailsBtn, :content:detailsDlg" />
<p:column sortBy="#{myRequest.id}" headerText="#{langu['REQUEST_NUMBER']}" >
<h:outputText value="#{myRequest.id}" />
</p:column>
<p:column sortBy="#{myRequest.requestDate}" headerText="#{langu['REQUEST_DATE']}" >
<h:outputText value="#{myRequest.requestDate}">
<f:convertDateTime pattern="#{tripconf['datePatternShow']}" timeZone="Africa/Cairo"/>
</h:outputText>
</p:column>
<p:column sortBy="#{myRequest.vehicleLicenseNumber}" headerText="#{langu['VEHICLE_LICENSE_NUMBER']}">
<h:outputText value="#{myRequest.vehicleLicenseNumber}" />
</p:column>
<p:column sortBy="#{myRequest.chassisNumber}" headerText="#{langu['CHASSIS_NUMBER']}">
<h:outputText value="#{myRequest.chassisNumber}" />
</p:column>
<p:column sortBy="#{myRequest.nationality.name}" headerText="#{langu['NATIONALITY']}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('requestsTable').filter()" effect="drop" >
<f:selectItem itemLabel="#{langu['ALL']}" itemValue="#{null}"/>
<f:selectItems value="#{searchRequestsBB.countries}" var="country" itemLabel="#{country.name}" itemValue="#{country.id}"/>
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{myRequest.nationality.name}" />
</p:column>
<p:column sortBy="#{myRequest.totalDues}" headerText="#{langu['TOTAL_DUES']}">
<h:outputText value="#{myRequest.totalDues}" />
</p:column>
<p:column sortBy="#{myRequest.requestStatus}" headerText="#{langu['status']}">
<p:progressBar value="#{myRequest.requestStatus*25}" labelTemplate="{value}%" displayOnly="true"/>
</p:column></p:dataTable>
Note that my application supports rtl languages and ltr also.
Any ideas of how to solve ??
You can see, that the distance bewteen email and the email is equal to the distance of member since and the date.
My code for this (using jsf-2):
<h:outputText value="email" />
<p:spacer width="50" height="10" />
<h:outputText value="sasdrftg#rfghre.de" />
<br></br>
<h:outputText value="member since" />
<p:spacer width="50" height="10" />
<h:outputText value="#{userUtilityBean.user.registered.time}">
<f:convertDateTime type="both" dateStyle="short" />
</h:outputText>
My css is simple:
.form-userdata {
position: absolute;
left: 30% !important;
color: blue !important;
}
How can I align the email to the "x-position" of the date?
For such kind of information presentation, use a h:panelGrid instead
<h:panelGrid columns="2">
<h:outputText value="email" />
<h:outputText value="sasdrftg#rfghre.de" />
<h:outputText value="member since" />
<h:outputText value="#{userUtilityBean.user.registered.time}">
<f:convertDateTime type="both" dateStyle="short" />
</h:outputText>
</h:panelGrid>
I have this problem :
here is the code :
<p:panelGrid styleClass="newArticlePanelGrid" >
<!-- __________________________________________row1________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Designation : " />
</p:column>
<p:column colspan="3" >
<p:inputText id="new-article-designation" style="width: 449px;"
value="#{articlesMB.article.designation}" required="true"
requiredMessage="designation requise" />
</p:column>
</p:row>
<p:row>
<p:column />
<p:column colspan="3" >
<p:message id="for-new-article-designation"
for="new-article-designation" display="text" />
</p:column>
</p:row>
<!-- __________________________________________row2________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Type : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-typeggg" required="true"
requiredMessage="type requis" converter="#{typeConverter}"
style="width:100%" value="#{articlesMB.article.type}">
<!-- <f:selectItem itemLabel="Selectionner Type" itemValue="" />-->
<f:selectItems value="#{articlesMB.listTypes}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
<p:column>
<h:outputLabel value="Unité : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-unite" required="true"
widgetVar="uniteselect" requiredMessage="unité requise"
converter="#{uniteConverter}" style="width:100%"
value="#{articlesMB.article.unite}">
<!-- <f:selectItem itemLabel="Selectionner Unite" itemValue="" /> -->
<f:selectItems value="#{articlesMB.listUnites}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column />
<p:column>
I don't know what I should do to reolve this problem : I tested width:100% but as you see it doesn't change
how can I resolve that ?
thank you in advance
The problem come from style="100%", it only change selectonemenu's width, you should set width for label inside selectonemenu(in this situation):
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
</style>
If you want set all selectonemenu:
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
.ui-selectonemenu{
width:100% !important;
}
</style>
for more general, you can include in css file.
See also: What is the JSF resource library for and how should it be used?