5 Replies Latest reply on Apr 8, 2011 11:24 AM by Job Mathew Kollamana

    Richface 3.3 table column alignment

    Job Mathew Kollamana Newbie

      Hi,

       

      I have a table with x number of rows.. on clicking on a row some new colum will be redenred and display a new datable in side the rich column.

       

      now i want to display the new table insdie the colum in the center of the column.

       

      can any one say how to achive this.

       

      have tried a lot nothing happens..

       

      please see the attchted screen shot.

       

      also wanted allign both the buttons on the right hand side :-(

        • 1. Richface 3.3 table column alignment
          Job Mathew Kollamana Newbie

          here is the code

           

          <h:form>

                   <rich:dataTable

                       onRowMouseOver="this.style.backgroundColor='#F1F1F1'"

                       onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"

                       cellpadding="0" cellspacing="0" id="table"

                       width="100%" border="0" var="record" value="#{bean.test}">

                      

                       <f:facet name="header">

                      Testcases

                       </f:facet>

                      

                               <rich:column width="2" >

                                   <a4j:commandLink  reRender="table">

                                        <h:graphicImage value="/Image/up.gif" style="border:0" rendered="#{record.showDetails}"/>

                                        <h:graphicImage value="/Image/down.gif" style="border:0" rendered="#{!record.showDetails}" />                     

                                       <f:setPropertyActionListener value="#{record}" target="#{bean.selectedTest}" />

                                       <a4j:actionparam name="shown" value="#{!record.showDetails}" assignTo="#{record.showDetails}" actionListener="#{bean.fetch}"/>

                                    </a4j:commandLink>

                               </rich:column>

                      

                               <rich:column >

                                   <f:facet name="header">

                                       <h:outputText value="name" />

                                   </f:facet>

                                    <h:outputText value="#{record.name" />

                               </rich:column>

                               <rich:column width="150">

                                       <f:facet name="header">

                                       <h:outputText value="xxxx" />

                                   </f:facet>

                                       <h:outputText value="#{record.xxx}" />

                               </rich:column>   

                               <rich:column width="150">

                                       <f:facet name="header">

                                       <h:outputText value="yyy" />

                                   </f:facet>

                                       <h:outputText value="#{record.yyy}" />

                               </rich:column>   

                               <rich:column width="150">

                                       <f:facet name="header">

                                       <h:outputText value="Created ON" />

                                   </f:facet>

                                       <h:outputText value="#{record.createdTime}" />

                               </rich:column>   

                               <rich:column width="150">

                                       <f:facet name="header">

                                       <h:outputText value="start time" />

                                       </f:facet>

                                       <h:outputText value="#{record.startTime}" />

                               </rich:column>   

                               <rich:column  width="150">

                                       <f:facet name="header">

                                       <h:outputText value=" end time" />

                                       </f:facet>

                                       <h:outputText value="#{record.endTime}" />

                               </rich:column>   

                       <rich:column rendered="#{record.showDetails}" breakBefore="true" colspan="7" style="align:center;">

                            <rich:dataTable rendered="#{record.showDetails}" onRowMouseOver="this.style.backgroundColor='#F8F8F8'"

                                               onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"

                                               var="expense" value="#{bean.steps}" rowKeyVar="row" headerClass="head2">

                                            <f:facet name="header">

                                                  <rich:columnGroup>

                                                      <rich:column>

                                                          <h:outputText value=" number" />

                                                      </rich:column>

                                                      <rich:column >

                                                          <h:outputText value="Description" />

                                                      </rich:column>

                                                      <rich:column >

                                                          <h:outputText value="xxx" />

                                                      </rich:column>

                                                  </rich:columnGroup>

                                              </f:facet>

                                              <rich:column breakBefore="true">

                                                       <h:outputText value="#{row+1}"></h:outputText>

                                               </rich:column>   

                                                   <rich:column>

                                                       <h:outputText value="#{expense.string}"></h:outputText>

                                               </rich:column>   

                                                <rich:column width="55">

                                                       <rich:comboBox var="tes" value="#{expense.role}" enableManualInput="false" defaultLabel="Role" suggestionValues="#{bean.flags}" >

                                                          <a4j:actionparam  value="#{tes}" assignTo="#{expense.role}" action="#{bean.ruler}" />

                                                      </rich:comboBox>

                                               </rich:column>       

                                                <rich:column  breakBefore="true" rendered="#{(row+1) eq bean.steps.size()}" colspan="3">

                                                   <a4j:commandButton value="Conclude">   

                                                       <a4j:support event="onclick" action="#{bean.save}" reRender="table"/>

                                                   </a4j:commandButton>                                

                                                   <a4j:commandButton value="Cancel">

                                                       <a4j:support event="onclick" action="#{bean.cancel}" reRender="table"/>

                                                   </a4j:commandButton>   

                                               </rich:column>       

                            </rich:dataTable>

                       </rich:column>                

                   </rich:dataTable>

          </h:form>

          • 2. Richface 3.3 table column alignment
            Ilya Shaikovsky Master

            wrap the table to <center> for example for table question

             

            and add style="text-align:right" to column with buttons.

             

            P.S. play more with firebug to easilly play with css solutions and see immediate results.

            • 3. Richface 3.3 table column alignment
              Job Mathew Kollamana Newbie

              unfortunately i have tried both of this

               

              and both warp for table and

               

              text-align for buttons are not working :-(

              • 4. Richface 3.3 table column alignment
                Job Mathew Kollamana Newbie

                Thank you so much LLya

                 

                i have added

                 

                this code to my inner table and every works fine

                 

                style="margin:auto;text-align:center; margin-left:auto; margin-right:auto; width:60%;"

                 

                and also the button with the code as you have mentioned thank you so much

                • 5. Richface 3.3 table column alignment
                  Job Mathew Kollamana Newbie

                  Thank you so much llya for the

                   

                  tip and guidance to firebug

                   

                  this one is helping me a lot