Issue with Primefaces rtl paginator - css

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 ??

Related

Change default header color of a p:dataTable?

I've a p:dataTable, I want to change the default color just of a header, is it possible ?
<f:facet name="header">
List of Fone
</f:facet>
Here my entire code:
<p:dataTable var="fone" value="#{fonePersistBean.listInfofone}" paginator="true" rows="10"
id="table" rowStyleClass="odd-row, even-row">
<f:facet name="header">
Lista de fones
</f:facet>
<p:column headerText="Tipo" sortBy="#{fone.contact}">
<h:outputText value="#{fone.contact}" />
</p:column>
<p:column headerText="DDD" sortBy="#{fone.ddd}">
<h:outputText value="#{fone.nuDdd}" />
</p:column>
<p:column >
<h:commandLink action="#{foneBean.searchFone(fone)}" >
<i class="cus-find"></i>
</h:commandLink>
</p:column>
</p:dataTable>
Thanks in advance !
Try CSS using .ui-datatable-header if you wish to change all dataTables. For specific tables, you can use a styleClass attribute for the specific dataTable

Components not on expected row when using colspan

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.

bug when displaying selectonemenu primefaces inside p 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?

changing apparence datatable according to attribute database jsf2 primefaces

I have this datatable that loadied from the datatabase, here is :
<p:dataTable id="cars" var="car" value="#{acceuilUserController.lc_maj}" tableStyle="width:auto">
<p:column headerText="Commande N° : " style="width:100px">
<h:outputText value="#{car.commande.id}" />
</p:column>
<p:column headerText="Date de mise à jour : " style="width:100px">
<h:outputText value="#{car.dateMaj}" />
</p:column>
<p:column headerText="Decision : " style="width:100px">
<h:outputText value="#{car.decison}" />
</p:column>
<p:column headerText="Etat : " style="width:100px">
<h:outputText value="#{car.etat}" />
</p:column>
</p:dataTable>
I have another attribut car.lu that accept two values :true or false, I want when it is false the line flashes and become colored with red
how I can achieve this?
You can achieve this using conditional coloring:
<p:dataTable id="cars" var="car" value="#{acceuilUserController.lc_maj}" tableStyle="width:auto" rowStyleClass=#{(car.lu == false) ? 'red' : null}>
<p:column headerText="Commande N° : " style="width:100px">
<h:outputText value="#{car.commande.id}" />
</p:column>
<p:column headerText="Date de mise à jour : " style="width:100px">
<h:outputText value="#{car.dateMaj}" />
</p:column>
<p:column headerText="Decision : " style="width:100px">
<h:outputText value="#{car.decison}" />
</p:column>
<p:column headerText="Etat : " style="width:100px">
<h:outputText value="#{car.etat}" />
</p:column>
</p:dataTable>
If car.lu returns false the style class red is applied to the row. So you have to have this in your CSS:
.red {
background-color: red;
}

Primefaces tooltip positioning in datatable

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.

Resources