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>
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 this table with 3 columns. The third column is for validation message which by default is empty.
<h:form>
<h:panelGrid id="panel" styleClass="data_table_pricing" columns="3">
<h:outputText value="Title"/>
<h:inputText id="title" value="#{pricingForm.title}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="title_message" for="title" style="color:red"/>
<!-- // -->
<h:outputText value="First name"/>
<h:inputText id="first_name" value="#{pricingForm.firstName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="first_name_message" for="first_name" style="color:red"/>
<!-- // -->
<h:outputText value="Last name"/>
<h:inputText id="last_name" value="#{pricingForm.lastName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="last_name_message" for="last_name" style="color:red"/>
<!-- // -->
</h:panelGrid>
<h:commandLink value="reset" class="link" type="reset" style="margin: 20px;">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
<h:commandLink value="Next" class="link" style="margin: 20px;" actionListener="#{pricingForm.calculatorPage()}">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
</h:form>
I use this CSS code to style the table:
.data_table_pricing {
border-spacing: 12px;
border-collapse: separate;
width: 100%;
}
I need to find a way to fix the size the columns. When validation message appears the second column is pushed to the left.
Is there any way to fix the size of the columns?
Setting a fixed width to the td element prevents the column jump.
.data_table_pricing tbody tr td {
width: 33%;
}
Edit:
Solution for variable number of table columns and should be used over above method.
table.data_table_pricing {
table-layout: fixed;
}
I have a jsf page with 3 panels and each panel and columns are assigned css as below. I gave word wrap to each column b but sometimes word wrap does not work. I tried giving a width = 33% for each induvidual panel but still didnt seem to work. Can anyone help me on this?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<style>
.shadowpanel.ui-panel .ui-panel-content {
border-radius: 5px;
background: #E6ECF0;
box-shadow: 5px 5px 5px #888888;
}
.ui-chkbox-box
{
background: white !important;
}
.columnA{}
.columnBwithwordBreak{
width:60%;
word-wrap: break-word;
}
</style>
<p:panel styleClass="shadowpanel" style="border: none">
<h:panelGrid columns="3" styleClass="topVerticalAlign" >
<h:panelGrid>
<p:panelGrid style="width: 100%;font-size: 15px;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="Dump Header" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="2" style="" columnClasses="columnA,columnBwithwordBreak">
<h:outputText style="font-weight: bold;white-space: pre" value="Sequence ID of Dump : " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(0)}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Dump Date: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(1)}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Dump Time: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(2)}" styleClass="courierFont" />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid>
<p:panelGrid style="width: 100%;font-size: 15px;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="Cover Page" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="2" style="" columnClasses="columnA,columnBwithwordBreak" >
<h:outputText style="font-weight: bold;white-space: pre" value="Size of SVM: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().svm}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Number of Active I Streams: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().aci}" styleClass="courierFont"/>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid style="" styleClass="topVerticalAlign">
<h:panelGrid>
<p:panelGrid style="font-size: 15px; width:100%;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="General Registers" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="8" style="" columnClasses="columnA,columnBwithwordBreak,columnA,columnBwithwordBreak,columnA,columnA,columnBwithwordBreak,columnA" >
<h:outputText style="font-weight: bold;white-space: pre" value="R0:" />
<p:commandLink style="color: #1484e6" action="#{coverPageProcess.newReg}" update="currentRegisterValue,regName" value="#{postProcessedDump.getRegisterData().regValues[0]}">
<f:setPropertyActionListener target="#{registerData.selectedRegister}" value="R0" />
</p:commandLink>
<h:outputText style="font-weight: bold;white-space: pre" value="R1:" />
<p:commandLink style="color: #1484e6" action="#{coverPageProcess.newReg}" update="currentRegisterValue,regName" value="#{postProcessedDump.getRegisterData().regValues[1]}">
<f:setPropertyActionListener target="#{registerData.selectedRegister}" value="R1" />
</p:commandLink>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</ui:composition>
I removed the white-space: pre; property from the css, and it works well now.
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?
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.