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

    side-by-side <rich:dataTable>

    gtludwig
    gtludwig Nov 21, 2009 3:34 PM

      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

      • 1529 Views
      • Tags:
        • 1. Re: side-by-side <rich:dataTable>
          agurisatti
          agurisatti Nov 22, 2009 1:52 PM (in response to gtludwig)

          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


            • Actions
          • 2. Re: side-by-side <rich:dataTable>
            gtludwig
            gtludwig Nov 23, 2009 5:54 AM (in response to gtludwig)

            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>


              • Actions
            • 3. Re: side-by-side <rich:dataTable>
              ilya_shaikovsky
              ilya_shaikovsky Nov 23, 2009 7:26 AM (in response to gtludwig)

               

              <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.

                • Actions