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.
Related
Could someone help me hide tab headers with css?
I'm using primefaces controls and there is one general tabview on page. And there's one tabview(ribbon) on each tab of general tabview.
I need hide all tabs headers of child tabview, but show tabs headers of general tabview.
I've try to make it by using
.ui-tabs.ui-tabs-top > .ui-tabs-nav {
display: none!important;
}
But this code hides all headers.
My code:
<ui:composition template="./../WEB-INF/pagesTemplate.xhtml">
<ui:define name="content">
<h:form id="centralTable">
<p:tabView id="tabview"
value="#{tabView.tabList}"
widgetVar="wtabview"
style="height: 100%"
dynamic="true">
<p:ajax event="tabChange" listener="#{tabView.onTabChange}"/>
<c:forEach items="#{tabView.tabList}" var="pageUrl">
<p:tab title= "#{msg[tabView.getCommonTitleByPage(pageUrl)]}">
<ui:include src="#{pageUrl}" />
</p:tab>
</c:forEach>
</p:tabView>
</h:form>
</ui:define>
</ui:composition>
Example tab of general tabview:
<p:tab title="#{msg['header.Main.Model']}">
<p:ribbon id="ribbonPannelModel">
<p:tab title="Model" id="tabModel" >
<p:ribbonGroup label="#{msg['header.Common.Editing']}" id="rgModelEdit">
...
</p:ribbonGroup>
</p:tab>
</p:ribbon>
<p:dataTable id="dtModel" widgetVar="wdtModel">
...
</p:dataTable>
</p:tab>
And I need to hide <p:tab title="Model" id="tabModel" > - this header
You must use an id for the tabs that you aim and then apply the style to it
#myTabId .ui-tabs.ui-tabs-top > .ui-tabs-nav {
display: none!important;
}
I am not sure about the space between the #myTabId and .ui-tabs try to use and delete it and see the result
Just add the styleClass "hideTabHeader" to p:tabView styleClass.
<p:tabView id="idXYZTabView" styleClass="hideTabHeader" ..
And the following to your CSS file:
.hideTabHeader > .ui-tabs-nav
{
display: none !important;
}
Easy and reusable for other TabView's.
I'm using primefaces 5.0. Below is my page where I like to set the height fix to 200px of the layoutunit west and center. Is there any possibility to do this? The current height will be ignored.
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">
<ui:define name="header_title">
<h:outputText value="Titel" align="center" />
</ui:define>
<ui:define name="content">
<h:form id="labelForm" style="height:100%">
<p:growl id="growl" showDetail="true" />
<p:layout style="height:100%" fullPage="false" >
<p:layoutUnit position="west" header="west" resizable="false" closable="false" collapsible="false" style="height:200px">
<p:tieredMenu id="type" model="#{dynamicLabelMenu.menu}" trigger="itemSelect" />
</p:layoutUnit>
<p:layoutUnit position="center" resizable="false" closable="false" collapsible="false" header="center" style="height:200px">
<!-- datatable -->
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<br/>
<br/>
<!-- datatable -->
</p:layoutUnit>
</p:layout>
</h:form>
</ui:define>
</ui:composition>
The height should be consistent with the other units... meaning if you would like to fix the height of one unit the others have to be also fixed...
The reason behind this is that PrimeFaces embeds the css rules into the style attribute and totally ignores your style.
You have two options to solve this:
If you are okay keeping the consistent between the units, then this might help. Currently your layout has a height of 100% that means the units should fit into the content, but to fix it you might take this approach
<p:layout style="min-height:200px;">
This way you have a minimum height of 200px and it could expand with the content, or just use height:200px.
The other option is to define a CSS class with !important option, although using !important is ugly and not recommended, but in this particular case PrimeFaces is injecting the css into the style attribute making it hard to cascade the height option.
<style>
.westUnit {
height: 200px !important;
}
</style>
<p:layoutUnit position="west" styleClass="westUnit">
Have a look at the CSS priority rules:
http://www.standardista.com/css3/css-specificity/
You can simply overwrite the primefaces CSS rules by adding more specific CSS selectors.
Example :
Primefaces:
.ui-dialog .ui-dialog-title {
text-align : center;
}
Your CSS:
#content .ui-dialog .ui-dialog-title {
text-align : right;
}
You can use the browser debugging tools (F12 in most browsers) to find out witch primefaces css is used for your components. Overwrite them with more specific CSS selectors from your own css code.
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>
We are upgrading from jsf 1.2 to jsf 2.
We are using apache myfaces 2.1 and rich faces 4.3.
The issue is headerClass attribute seems to be not working for rich:dataTable. Following is the xhtml code
.class2{
border: 1px solid #000;
}
.class1{
text-align:left;
color:#000;
font-weight:normal;
}
<rich:dataTable value="#{bean.quns}" var="quns" headerClass="class1" columnClasses="class2">
<f:facet name="header">
<h:outputText value="User Name : #{bean.userName}"/>
</f:facet>
<rich:column>
<h:panelGrid id="qns#{index+1}" columns="2">
<h:outputText value="qns #{index+1}"/>
<h:selectOneMenu value="#{quns.question}">
<f:selectItems value="#{bean.questionPool}" />
</h:selectOneMenu>
<h:outputText value="Answer"/>
<h:inputText value="#{quns.answer}"/>
</h:panelGrid>
</rich:column>
</rich:dataTable>
The columnclasses attribute is working perfectly fine.
When rich:dataTable built in css style for table header cell is modified like below :
.rf-dt-hdr-c{
text-align:left;
color:#000;
font-weight:normal;
}
header class works perfectly fine indicating that default style sheet is overwriting explicit one.
How can headerClass styleClass will be made to work ?
Can anyone please help ?
When you investigate the rendered XHTML-code, you will recognize
the headerClass content is added to the tr of the header row
the columnClassES content is, tokenized by space, added to the appropriate columns td
To have the commands of your class1 CSS on the same layer like rf-dt-hdr-c, just change the CSS definition to
.class1 th {
text-align:left;
color:#000;
font-weight:normal;
}
Hope it helps...
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>