7 Replies Latest reply on Oct 14, 2008 9:03 PM by Paul Baker

    Tag HTML affect on other components

    Paul Baker Apprentice

      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

        • 1. Re: CENTER Tag HTML affect on other components
          Paul Baker Apprentice

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

          • 2. Re: <CENTER> Tag HTML affect on other components
            Ilya Shaikovsky Master

            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.

            • 3. Re: <CENTER> Tag HTML affect on other components
              shadowcreeper Apprentice

              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.

              • 4. Re: Tag HTML affect on other components
                Paul Baker Apprentice

                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>


                • 5. Re: Tag HTML affect on other components
                  Piotr Kawiak Newbie

                  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!

                  • 6. Re: Tag HTML affect on other components
                    Paul Baker Apprentice

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

                    • 7. Re: Tag HTML affect on other components
                      Paul Baker Apprentice

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