Richface 3.3 table column alignment

[jobmathew]

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 :-(

[jobmathew]

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>

[ilya_shaikovsky]

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.

[jobmathew]

unfortunately i have tried both of this

and both warp for table and

text-align for buttons are not working :-(

[jobmathew]

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

[jobmathew]

Thank you so much llya for the

tip and guidance to firebug

this one is helping me a lot