3 Replies Latest reply on Nov 23, 2009 7:26 AM by Ilya Shaikovsky

    side-by-side <rich:dataTable>

    Gustavo Ludwig Newbie

      hello,

      I need to display data from four lists on the same screen and iterate over them. The second list is populated from the first list, the third uses a value from the second and on clicking an item on the third list I get the fourth list populated. It took me some trouble to do this, but all works beatifully! :)

      The only way I managed to put the <rich:dataTable> components side-by-side was putting each one inside a <rich:column>, but the <rich:dataTable>s get rendered with "vertical allignment" set to middle.

      This isn't much of a problem, but I'd like the <rich:dataTable> alligned to the top and I've no idea how to do that! Please advise!

      I have already tried to no avail using <rich:subTable>.

      Thanks,
      gtludwig

        • 1. Re: side-by-side <rich:dataTable>
          Antonio Gurisatti Newbie

          Hi,

          I've done similar things an I'm pretty sure it works this way:

          Put your tables inside a panel grid like this.

          <h:panelGrid columns="3" columnClasses="column-top-align">
           <rich:dataTable value="Table 1">
           </rich:dataTable>
           <rich:dataTable value="Table 2">
           </rich:dataTable>
           <rich:dataTable value="Table 3">
           </rich:dataTable>
           </h:panelGrid>
          


          Put a style on your page or a css stylesheet like this:


          .column-top-align {
           vertical-align: top;
          }
          
          
          It should be all

          Greetings and luck,
          Antonio


          • 2. Re: side-by-side <rich:dataTable>
            Gustavo Ludwig Newbie

            Hi,

            it didn't work :(

            I tried creating a WebContent/css/style.css file with the following content:

            .column-top-align {
             vertical-align: top;
            }


            and applying it like this:

            <ui:define name="...">
            <head>
             <a4j:loadStyle src="/css/style.css" />
            </head>
            <a4j:form>
            // page code
            </a4j:form>
            </ui:define>


            and have called the style like this:

            <h:panelGrid columns="4" columnClasses="column-top-align">
            </panelGrid>


            • 3. Re: side-by-side <rich:dataTable>
              Ilya Shaikovsky Master

               

              <h:panelGrid columns="4" columnClasses="column-top-align">
              </panelGrid>


              change this to
              <h:panelGrid columns="4" columnClasses="column-top-align, column-top-align, column-top-align, column-top-align">
              </panelGrid>


              One of the JSF builds contained the issue that the class not applied to all td-s but to the first only.