Version :
Apache MyFaces 2.0
Rich Faces 4.3
Issue :
We are migrating from JSF 1.2 to JSF 2.
As there is no built-in support for sorting for rich:dataTable , we are using custom sorting solution as per rich faces showcase.
The sorting works fine , only issue is since a4j:commandLink is used for sort action trigger , the column header text is coming with "underline" style.
Is there any way the underline can be removed for a4j:commandLink ?
The rich faces showcase doesn't show any styling for a4j:commandLink ?
Please help.
You need setup styleClass attribute for h:commandLink in column header.
Style
.tableColumnHeader {
text-decoration: none;
color: black;
}
is used like this:
<rich:dataTable id="txnTable" rows="#{referenceData.recordsPerPage}"
style="width: 100%" rowClasses="oddrow, evenrow"
value="#{bean.transactions}" var="res" sortMode="single">
<rich:column id="activityDate" sortable="true"
sortBy="#{res.activityDate}" sortOrder="descending">
<f:facet name="header">
<h:commandLink value="#{msg.transDate}" styleClass="tableColumnHeader">
<rich:componentControl target="txnTable" operation="sort">
<f:param name="column" value="activityDate" />
<f:param value="" />
<f:param name="reset" value="true" />
</rich:componentControl>
<h:graphicImage value="/images/sort/sort_asc.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{bean.transactions.order == 'activityDate ASC'}" />
<h:graphicImage value="/images/sort/sort_des.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{bean.transactions.order == 'activityDate DESC'}" />
<h:graphicImage value="/images/sort/sort_uns.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{bean.transactions.order != 'activityDate ASC'
and bean.transactions.order != 'activityDate DESC'}" />
</h:commandLink>
</f:facet>
<h:outputText value="#{res.activityDate}" />
</rich:column>
Related
It's a simple question, is it possible to give style to the component p:fragment?
There aren't any style/styleClass/class attributes for p:fragment specified in the documents (5.0) (although my IDE suggests me to use class based on the library but it doesn't work).
Basically what I want to do is to change the display to:
display: inline;
Because by default the component is rendered as a div with display: block;
I know I could use the id attribute and give it some style, but I don't want this solution because I have multiple fragments and it would be quite ugly.
You can specific your css like my example
<style>
div[id$="-fragment"]{
background-color: red;
}
</style>
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="ignored" value="Required" />
<p:inputText id="ignored" required="true" />
</h:panelGrid>
<p:fragment autoUpdate="true" id="first-fragment">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="txt" value="Text Value:" />
<p:inputText id="txt" value="#{basicView.text}" />
<p:commandButton value="Submit"/>
<h:outputText value="#{basicView.text}" />
</h:panelGrid>
</p:fragment>
<p:fragment autoUpdate="true" id="second-fragment">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="txt2" value="Text Value:" />
<p:inputText id="txt2" value="#{basicView.text}" />
<p:commandButton value="Submit"/>
<h:outputText value="#{basicView.text}" />
</h:panelGrid>
</p:fragment>
</h:form>
Hope this help.
Primefaces' fragment component is used to define automatic partially process and update sections whenever ajax request is triggered by a descendant component, it is not a component to display/style content.
If you do not need the automatic processing functionality, use facelet's ui:fragment component for your rendering needs and place its content in a div, which you can style however you want.
Hello
<ui:fragment>
<div style="display: inline;">Hello</div>
</ui:fragment>
Hello
I have a multi column form that I need to display and I used the JSF panelGrid component like this. each panelgrid is within a primefaces p:panel element
<h:panelGrid columns="6" cellpadding="1" cellspacing="1" style="width: 100%" columnClasses="column1">
my column1 in CSS is:
.column1 {
width: 14%;
}
It renders on screen like image below. Notice the columns within the panels are not aligned and it looks haphazard. How can I align the form elements/labels in a uniform manner and also get rid of the spaces and padding to make the form layout more compact.
Thanks in Advance BaluSC if you answer! You really are the king of JSF:-)
I also have a multi-column form using JSF PanelGrid.
<h:panelGrid id="panelGrid" columns="4" cellpadding="3"
columnClasses="colLeft,colRight,colLeft,colRight">
<p:outputLabel for="username" value="Username" />
<p:inputText id="username" value="#{myBean.user.username}"
required="true" />
<p:outputLabel for="fullName" value="Full Name" />
<p:inputText id="fullName" value="#{myBean.user.fullName}"
required="true" />
<p:outputLabel for="password" value="Password" />
<p:password id="password" value="#{myBean.user.password}"
required="true" match="passConfirm" />
<p:outputLabel for="passConfirm"
value="Re-type Password" />
<p:password id="passConfirm" value="#{myBean.user.password}"
required="true" />
</h:panelGrid>
Here is CSS.
#panelGrid {
width: 100%;
}
.colLeft {
width: 15%;
}
.colRight {
width: 35%;
}
Here is output.
Hope it works!
I have a panel grid with two columns and I want to align the right column text in the center and the left column text to the left.
I try to play with it over and over but still it’s not working
<pe:layoutPane position="south" resizable="false" closable="false" statusbar="true" spacing="0">
<h:panelGrid columns="2" styleClass="left,centered" width="100%">
<h:outputText value="DEV"/>
<h:panelGroup>
<h:outputText value="Developed by "/>
<h:outputLink id="link1" value="mailto:to#mm.com" >
<h:outputText value="text" style="text-decoration:underline"/>
</h:outputLink>
</h:panelGroup>
</p:panelGrid>
</pe:layoutPane>
Here is the css:
.centered {
margin: 0px auto;
text-align: center;
}
.left {
float: left;
}
Any idea how could I archive this layout ??
Thanks
you should better use
<h:panelGrid columns="2" columnClasses="left,centered">
...
</h:panelGrid>
greetings!
I found the solution :)
<center>
<h:outputText value="DEV" style="float: left" styleClass="footer"/>
<h:outputText value="xxxxxxx" styleClass="footer"/>
<h:outputLink id="link1" value="mailto:xxxx#xxxx" styleClass="footer">
<h:outputText value="xxx" style="text-decoration:underline" styleClass="footer"/>
</h:outputLink>
</center>
I have the jsf code and css code below. I'm having trouble getting the css margin attributes to take effect. All the other attributes work fine except margin. What am I doing wrong?
Notice the .contentDialog css class is applied to p:dialog. What I expect is a 100px margin around h:outputText enclosed in f:facet name="header". But it's not happening.
I've tested on IE 7, IE 8, FireFox 7.0.1 and Chrome 16.0.912.63 m. Same problem on all browsers. Also, I'm using PrimeFaces.
JSF CODE
<h:form id="newContentForm">
<p:dialog header="New Menu Item Type..." widgetVar="newWidget"
resizable="false" showEffect="explode" hideEffect="explode" modal="true" closable="false"
styleClass="contentDialog" width="440">
<h:panelGrid id="newPopUpWindow" column="1">
<!-- Grid Header -->
<f:facet name="header">
<h:outputText value="New information"/>
</f:facet>
<!-- Grid Body -->
<h:outputText value="Description:"/>
<p:inputText id="newDescriptionInText" value="#{menuItemTypeContent.selectedContent.menuItemTypeDescr}">
<p:ajax process="#this"/>
</p:inputText>
<!-- Grid Footer -->
<f:facet name="footer">
<!-- Dialog command bottons -->
<h:panelGroup>
<!-- Submit -->
<p:commandButton value="Submit" image="ui-icon ui-icon-check"
actionListener="#{menuItemTypeContent.save}"
oncomplete="handleNewRequest(xhr, status, args)"/>
<!-- Cancel -->
<p:commandButton value="Cancel" image="ui-icon ui-icon-close"
actionListener="#{menuItemTypeContent.clearContent}"
onclick="newWidget.hide()" type="reset"/>
</h:panelGroup>
</f:facet>
</h:panelGrid>
<!-- Submit javascript handler -->
<h:outputScript>
function handleNewRequest(xhr, status, args) {
if (args.duplicateSaveError) {
duplicateError.show();
}else if (args.illegalStatusError) {
deleteError.show();
}else if (args.validationFailed) {
newContentError.show();
}else {
// Hide new content dialog box if add happened without exceptions
newWidget.hide();
}
}
</h:outputScript>
</p:dialog>
</h:form>
CSS CODE
.contentDialog {
font-size:13px;
border:2px solid #2D65B0;
}
.contentDialog table {
border:1px solid #8DB1E2;
width:100%;
}
.contentDialog th {
background-color:#2D65B0;
width:100%;
text-align:left;
color:red;
margin:100px;
}
This is not related to JSF but rather to CSS and html. You cannot use margins to style table cells. What you can use is cellspacing attribute for the entire table or padding for individual cells. You can find more information under this question.
I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.
components inside panelgris are always middle aligned, instead of top.
tried whatever they said in the below post.
How to control alignment of DataTable inside of a PanelGrid?
Please let me know if there is a remedy.
The <h:panelGrid> renders a HTML <table> element. The vertical alignment of a table cell <td> defaults indeed to middle. You want to make it to be top instead. This is easy with CSS.
<h:panelGrid styleClass="foo">
with
.foo td {
vertical-align: top;
}
If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:
.foo>tbody>tr>td {
vertical-align: top;
}
so that only the panelgrid's own table cells are top aligned.
To learn all about CSS, check http://www.csstutorial.net.
Use the panelGrid's columnClasses attribute to identify a CSS class that includes the vertical-align: top; style:
<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>
and the CSS file:
.topAligned {
vertical-align: top;
}
The contents of the first column in the panelGrid will then be top-aligned within their cells.
Use the styleClass for the panelGrid as in the following example code:
<h:panelGrid columns="2" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>
Then in the css configure as follows:
.top-aligned-columns td{
vertical-align: top;
}
With this method you will be able to not only top-align the rows but you can also apply the same styleClass to other panelGrids within the encompassing panelGrid.
For example:
<h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
<h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" >
<p:ajax event="change" process="#this" update="tvQuickScore"/>
</p:inputText>
<p:outputLabel value="#{resources['Name']}" />
<p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
<p:outputLabel value="#{resources['Surname']}" />
<p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:panel>