extendedDataTable row height problem

[healeyb]

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.

[ryanyoder]

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>

[healeyb]

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.

[ryanyoder]

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;

}

[healeyb]

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.