4 Replies Latest reply on Aug 22, 2011 9:52 AM by Brendan Healey

    extendedDataTable row height problem

    Brendan Healey Master

      Hi, I've got a EDT with 2 columns, one has a commandLink with a child graphicImage (60px high)

      and the other column is outputText with a small font. At first the <td> for each column is 21px,

      so you can't see much of the image. Then I try inline css .rf-edt-c { height: auto; }, and whilst you

      can then see everything all the table cells are different heights as they size to the content. By

      specifying a fixed height for rf-edt-c things are much better, but whilst I'd be quite happy with this

      as a solution I just wondered if there was a better way to do it, without a fixed height.

       

      The next problem is that the text in the 2nd column is vertically aligned to the top, and I absolutely

      cannot get it to align middle. I've tried css like .rf-edt-c-cnt { vertical-align: middle; height: inherit; }

      so that the div enclosing the text has a height around 70px, and should then position the text in

      the middle of it?

       

      I've been trying to get this to work for a full day with no success, I've spent hours going through the

      forums but can't find anything that works for me, I'd appreciate it if someone could share a solution.

       

      Thanks.

        • 1. Re: extendedDataTable row height problem
          Ryan Yoder Newbie

          This is your lucky day because I just did this on one of my pages.  The problem is that the TDs don't have a border, only the DIV inside the TD has the border in RF4.

          So you shut off the borders on the DIV and turn on the borders on the TD.  You also set your div to height:100%.

          I put this style directive in my page and it works like a champ for me.

           

          <style>

          .rf-edt-hdr-c {

                 border-right:none !important;

              border-bottom:none !important;

          }

          .rf-edt-c {

              height: 100% !important;

              border-right:none !important;

              border-bottom:none !important;

          }

          .rf-edt-cnt td {

              border-bottom: 1px solid #9FC0E9;

              border-right: 1px solid #9FC0E9;

          }

          </style>

          • 2. Re: extendedDataTable row height problem
            Brendan Healey Master

            Ryan, it works like a dream for me also, thanks very much you've made my day. I'll have to

            try and digest the finer points of your solution, it doesn't seem that I was even close in my

            attempts to resolve this.

             

            Regards,

            Brendan.

            • 3. Re: extendedDataTable row height problem
              Ryan Yoder Newbie

              Glad it could be of help.

              I realized that I don't want auto sized rows on every table in my app so I have revised the css to the following code.

              You now must use styleClass="autoSizeRows" for the CSS selector to pick up these changes.

              I would not have been able to come up with this solution without the Firebug plugin for Firefox.  Download it and learn it immediately if you do not have it.

              It is a crucial tool in understanding html/css and allows you to play around with the css dynamically.

               

               

               

               

               

               

               

               

               

               

               

              .autoSizeRows .rf-edt-hdr-c

               

              {

               

              border-right:none !important;

               

              border-bottom:none !important;

              }

              .autoSizeRows .rf-edt-c

               

              {

               

              height: 100% !important;

               

              border-right:none !important;

               

              border-bottom:none !important;

              }

              .autoSizeRows .rf-edt-cnt td

               

              {

               

              border-bottom: 1px solid #9FC0E9;

               

              border-right: 1px solid #9FC0E9;

              }

               

              • 4. Re: extendedDataTable row height problem
                Brendan Healey Master

                Thanks, I'll try it. I use the google chrome developer tools which is equivalent to firebug I

                think. I spend plenty of time figuring things out with this, but a good tip nontheless.

                 

                Regards,

                Brendan.