bJQueryUI: true with row_details api - borders displayed on cells when first row expanded

DaveGYNWA

Hi,

Found an interesting issue when using bJQueryUI: true and the row_details api functionality. Have mocked up an example, combinging the row_details example with the themeroller example, for reference.

Example: http://jsbin.com/ifiqol/1/

The issue I've found is when expanding the FIRST row, it inserts left/right borders on the cells in the row - it doesn't do it for the rest of the rows. In addition, collapse that first row down...the borders are filled in on all cells in all the rows.

Any ideas on what might be causing it? And maybe a workaround/fix for it? Ideally I want the first row to behave exactly how the other rows behave -> no border.

allan

That's a belter that one - it looks like a rendering bug in Firefox to me (not seeing in it Safari, Chrome, or IE - just Firefox - can you confirm if that is the case for you?).

If you remove `border-collapse: collapse;` then the issue 'goes away' (I've run into a whole load of issues with border-collapse over the years, so I'm not surprised that would be the issue. Frustratingly when I use the dev tools for Firebug, the screen does repaint (eventually) and the problem is hidden, which is another reason why I think this is actually a Firefox bug.

There is a Mozilla wiki page discussing the issues with border collapse which is quite interesting here: https://wiki.mozilla.org/Gecko:Border_collapse and there are a bunch of bugs in the Mozilla Bugzilla. Not that it really helps you though here...

I'm wondering if this was a regression in the latest Firefox. I've not seen this problem before and don't recall it being reported. I'll try the Firefox alphas tomorrow and see if they have a fix.

However, I guess the work around for the moment is to not use border-collpase: collapse...

Regards,
Allan

DaveGYNWA

Thanks for taking a look Allan.

Interesting - hadn't thought of checking other browsers at all for this one....I pretty much trust Firefox (or Pale Moon, which I use) and then worry about other browsers (IE) towards the end.

Just tested in Firefox 12 - same issue there, so looks like it's been around for a while. I've got access to a few machines in work with older versions of Firefox on them, so will take a further look to see if I can tie down a 'start' for this one.

Can confirm that the border-collapse: collapse removal does make it go away, but side-effect isn't great....but I think I can overcome that one (am planning on setting the background on all rows to white, so that effect shouldn't be seen. Would just need to come up with a modification to the header row (probably set the border to same colour as the background)

DaveGYNWA

Nah...stuff setting the border. Here's a better way of getting it to look like it would with [code]border-collapse: collapse[/code]

[code]
table.display {
margin: 0 auto;
width: 100%;
clear: both;
/*border-collapse: collapse;*/
border-collapse: separate;
border-spacing:0;
}
[/code]

Result!!