Tag HTML affect on other components

[pbaker01]

I am using the html CENTER tag to center content. However, when I use CENTER I am unable to left justify the content of tables (i.e. extendedDataTable). ALL content is centered, even the content within table columns.

What affect does the use of CENTER have over rendering other Richfaces componts?

In the snippet below I am trying to left justify the third column... with no success...

Any ideas?

<ui:define name="content">
 <center>
 <h:outputLabel value="Message Requirements"
 styleClass="titleText" />
 </center>

 <ui:include src="/messages.xhtml" />

 <a4j:keepAlive beanName="msgRqmtsController" />

 <a4j:form id="effectiveSheetForm">
 <center> <<<<------ This is causing problems....
 <h:panelGrid columns="1">
 <h:panelGroup>
 <rich:spacer height="5" />
 <rich:extendedDataTable id="revision"
 binding="#{msgRqmtsController.table}" columnClasses = "colC,colC,colL"
 value="#{msgRqmtsController.value}" var="item"
 rowKeyVar="idx" selectionMode="single" width="740px"
 height="450px" cellpadding="0" cellspacing="0">

 <rich:column id="selected" sortable="false" width="30px"
 label="Select">
 <f:facet name="header">
 <h:outputText value="Sel" />
 </f:facet>
 <h:selectBooleanCheckbox value="#{item.msgSelected}">
 </h:selectBooleanCheckbox>
 </rich:column>

 <rich:column id="msgType" sortable="true"
 headerClass="extendedTableHdrCol" sortBy="#{item.msgType}"
 filterBy="#{item.msgType}" filterEvent="onkeyup" width="100px"
 label="Message Type">
 <f:facet name="header">
 <h:outputText>Message<br/>Type</h:outputText>
 </f:facet>
 <h:outputText value="#{item.msgType}"
 styleClass="tableTextInput" />
 </rich:column>

 <rich:column id="msgDescription" sortable="true"
 headerClass="extendedTableHdrCol" sortBy="#{item.msgDescription}"
 width="500px" label="Message Description" style="text-align: left" styleClass="colL">
 <f:facet name="header">
 <h:outputText>Message<br/>Description</h:outputText>
 </f:facet>
 <h:outputText value="#{item.msgDescription}" styleClass="tableTextInput" />
 </rich:column>

Thanks in advance - PB

[pbaker01]

Note subject contains brackets around CENTER... Subject should read:
CENTER HTML Tag and its affect on other components.

[ilya_shaikovsky]

3.3.0 SNAPSHOT. FF3, IE 7, google chrome.

using

<center>
 <h:panelGrid columns="">
 <h:panelGroup>
 <rich:extendedDataTable value="#{capitalsBean.capitals}" var="cap" id="table"
 width="580px" height="400px" sortMode="#{extendedTableBean.sortMode}"
 selectionMode="#{extendedTableBean.selectionMode}" rows="10">
 <rich:column sortable="false">
 <f:facet name="header">
 <h:outputText value="Flag"/>
 </f:facet>
 <h:graphicImage value="#{cap.stateFlag}"/>
 </rich:column>
 <rich:column sortable="true" sortBy="#{cap.state}" filterBy="#{cap.state}" filterEvent="onkeyup" width="170px">
 <f:facet name="header">
 <h:outputText value="State Name"/>
 </f:facet>
 <h:outputText value="#{cap.state}"/>
 </rich:column>
 <rich:column sortable="true" sortBy="#{cap.name}" filterBy="#{cap.state}" filterEvent="onkeyup" width="170px">
 <f:facet name="header">
 <h:outputText value="State Capital"/>
 </f:facet>
 <h:outputText value="#{cap.name}"/>
 </rich:column>
 <rich:column sortBy="#{cap.timeZone}" filterBy="#{cap.timeZone}">
 <f:facet name="header">
 <h:outputText value="Time Zone"/>
 </f:facet>
 <h:outputText value="#{cap.timeZone}"/>
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller></rich:datascroller>
 </f:facet>
 </rich:extendedDataTable>
 </h:panelGroup>
 </h:panelGrid>
 </center>

I'm getting table rendered centered and content of the table justified to left.

Also you could try

 <table width="100%">
 <tbody>
 <tr>
 <td width="100%" align="center">
 <rich:extendedDataTable value="#{capitalsBean.capitals}" var="cap" id="table"
 width="580px" height="400px" sortMode="#{extendedTableBean.sortMode}"
 selectionMode="#{extendedTableBean.selectionMode}" rows="10">
 <rich:column sortable="false">
 <f:facet name="header">
 <h:outputText value="Flag"/>
 </f:facet>
 <h:graphicImage value="#{cap.stateFlag}"/>
 </rich:column>
 <rich:column sortable="true" sortBy="#{cap.state}" filterBy="#{cap.state}" filterEvent="onkeyup" width="170px">
 <f:facet name="header">
 <h:outputText value="State Name"/>
 </f:facet>
 <h:outputText value="#{cap.state}"/>
 </rich:column>
 <rich:column sortable="true" sortBy="#{cap.name}" filterBy="#{cap.state}" filterEvent="onkeyup" width="170px">
 <f:facet name="header">
 <h:outputText value="State Capital"/>
 </f:facet>
 <h:outputText value="#{cap.name}"/>
 </rich:column>
 <rich:column sortBy="#{cap.timeZone}" filterBy="#{cap.timeZone}">
 <f:facet name="header">
 <h:outputText value="Time Zone"/>
 </f:facet>
 <h:outputText value="#{cap.timeZone}"/>
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller></rich:datascroller>
 </f:facet>
 </rich:extendedDataTable>
 </td>
 </tr>
 </tbody>
 </table>

Also works fine for me.

[shadowcreeper]

Or you could try the XHTML strict recommended method for replacement of center tag:

<h:panelGrid columns="1" style="margin-left: auto; margin-right: auto;">

However, you may also need to tell the surrounding element (the form in this case) to be width="100%".
Or just surround it with a full width div or somesuch other element.

[pbaker01]

Thanks for the comments above... I think that the problem may not be the CENTER tag. I now have found, using firebug, that the columnClasses are not getting rendered properly.

The extendedDataTable code below renders four columns. Only the last column contains the styleClass colL. THe other three column are not rendered with the specified styleClass.

Am I doing something wrong?

<rich:extendedDataTable id="revision"
 binding="#{msgRqmtsController.table}" columnClasses="colC, colC, colL, colL"
 value="#{msgRqmtsController.value}" var="item" rowKeyVar="idx"
 selectionMode="single" width="740px" height="450px"
 cellpadding="0" cellspacing="0">

 <rich:column id="selected" sortable="false" width="30px"
 label="Select" styleClass="colC">
 <f:facet name="header">
 <h:outputText value="Sel" />
 </f:facet>
 <h:selectBooleanCheckbox value="#{item.selected}">
 </h:selectBooleanCheckbox>
 </rich:column>

 <rich:column id="type" sortable="true"
 headerClass="extendedTableHdrCol" sortBy="#{item.type}"
 filterBy="#{item.type}" filterEvent="onkeyup" width="100px"
 label="Message Type">
 <f:facet name="header">
 <h:outputText>Message<br />Type</h:outputText>
 </f:facet>
 <h:outputText value="#{item.type}" styleClass="tableTextInput" />
 </rich:column>

 <rich:column id="description" sortable="true"
 headerClass="extendedTableHdrCol" sortBy="#{item.description}"
 width="500px" label="Message Description"
 style="text-align: left" styleClass="colL">
 <f:facet name="header">
 <h:outputText>Message<br />Description</h:outputText>
 </f:facet>
 <h:outputText value="#{item.description}"
 styleClass="tableTextInput" />
 </rich:column>

</rich:extendedDataTable>

html found using firebug. Note that only the last column contains the user specified styleClass. The first three columns do not contain the user specified styleClasses.

<tr id="effectiveSheetForm:revision:n:0" class="extdt-firstrow rich-extdt-firstrow extdt-row-selected rich-sdt-row-selected extdt-row-active rich-sdt-row-active">
<td id="effectiveSheetForm:revision:0:selected" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">
</div>
</td>
<td id="effectiveSheetForm:revision:0:type" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">
</div>
</td>
<td id="effectiveSheetForm:revision:0:description" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">
</div>
</td>
<td class="extdt-empty-cell rich-extdt-cell colL"/>
</tr>

[pkawiak]

You are passing columnClasses fine, but they aren't passed to all but the last column. I think that we have it fixed in the latest snapshot, if not - it will be fixed during next few days. Thanks for your input!

[pbaker01]

Thanks! I'm currently using RF 3.2.2.GA. I'll try a SNAPSHOT release in the coming days and let you know.

[pbaker01]

Yes, the problem is fixed in 3.3.0 SNAPSHOT - thanks!