10 Replies Latest reply on Feb 26, 2009 10:01 AM by lmk

    dataTable vertical align

    lmk

      Hi,
      dont know if the problem is related to RF ou juste a CSS one,
      I have 2 datables inside a a panelGrid with 2 columns; dataTable have a dynamic rows, I cannot set the vertical align for the 2 tables on the top.

      <h:panelGrid columns="2" cellpadding="5" cellspacing="5"
      columnClasses="grid_panels,grid_panels">
      <rich:dataTable cellpadding="0" cellspacing="0" border="0">
      </rich:dataTable>
      <rich:dataTable cellpadding="0" cellspacing="0" border="0">
      </rich:dataTable>
      </h:panelGrid>
      
      .grid_panels {
       width: 44%;
       padding: 2px;
       height:auto;
       line-height: 2px;
      }


      regards !

        • 1. Re: dataTable vertical align
          lmk

          it seems to be related to dataTable.

          vertical-align inside dataTable style do not work.

          regards!

          • 2. Re: dataTable vertical align
            nbelaevski

            You must add vertical-align: top.

            • 3. Re: dataTable vertical align
              lmk

               

              "nbelaevski" wrote:
              You must add vertical-align: top.


              I added it

              <rich:dataTable style="vertical-align:top;" ../>


              it does not work.


              • 4. Re: dataTable vertical align
                nbelaevski

                Sure. Vertical align should be applied to container:

                .grid_panels {
                width: 44%;
                padding: 2px;
                height:auto;
                line-height: 2px;
                vertical-align: top;
                }

                • 5. Re: dataTable vertical align
                  lmk

                   

                  "nbelaevski" wrote:
                  Sure. Vertical align should be applied to container:

                  .grid_panels {
                  width: 44%;
                  padding: 2px;
                  height:auto;
                  line-height: 2px;
                  vertical-align: top;
                  }



                  it does not work anyway..

                  the container is also a table..


                  • 6. Re: dataTable vertical align
                    nbelaevski

                    Worked for me...

                    • 7. Re: dataTable vertical align
                      lmk

                       

                      "nbelaevski" wrote:
                      Worked for me...



                      here the tree of components;

                      <a4j:outputPanel>
                      <h:panelGrid columns="2">
                      <h:panel:Group>
                      <rich:dataTable/>
                      </h:panelGroup>
                      <h:panel:Group>
                      <rich:dataTable/>
                      </h:panelGroup>
                      </h:panelGrid>
                      </a4j:outputPanel>



                      • 8. Re: dataTable vertical align
                        nbelaevski



                        <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                         xmlns:ui="http://java.sun.com/jsf/facelets"
                         xmlns:h="http://java.sun.com/jsf/html"
                         xmlns:f="http://java.sun.com/jsf/core"
                         xmlns:a4j="http://richfaces.org/a4j"
                         xmlns:rich="http://richfaces.org/rich"
                         xmlns:c="http://java.sun.com/jstl/core"
                         xmlns:fn="http://java.sun.com/jsp/jstl/functions">
                         <html>
                        
                         <body>
                        
                         <style>
                         .grid_panels {
                         width: 44%;
                         padding: 2px;
                         height:auto;
                         line-height: 2px;
                         vertical-align: top;
                         }
                         </style>
                        
                         <h:panelGrid columns="2" cellpadding="5" cellspacing="5"
                         columnClasses="grid_panels,grid_panels">
                         <rich:dataTable cellpadding="0" cellspacing="0" border="0"
                         value="#{forum5Bean.data}">
                         <rich:column>data</rich:column>
                         </rich:dataTable>
                         <rich:dataTable cellpadding="0" cellspacing="0" border="0"
                         value="#{forum5Bean.lotOfData}">
                         <rich:column>data</rich:column>
                         </rich:dataTable>
                         </h:panelGrid>
                        
                        
                         </body>
                        
                         </html>
                        </ui:composition>


                        • 9. Re: dataTable vertical align
                          lmk

                          the panelGrid is inside an outputPanel witch inside panelGrid wich inside a panel wich inside a tabPanel.

                          • 10. Re: dataTable vertical align
                            lmk

                             

                            "lmk" wrote:
                            the panelGrid is inside an outputPanel witch inside panelGrid wich inside a panel wich inside a tabPanel.



                            it is resolved, the problem was that the class style declared inside xhtml was not be included on page css classes.

                            thanks!