bJQueryUI: true with row_details api - borders displayed on cells when first row expanded
bJQueryUI: true with row_details api - borders displayed on cells when first row expanded
DaveGYNWA
Posts: 10Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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
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)
[code]
table.display {
margin: 0 auto;
width: 100%;
clear: both;
/*border-collapse: collapse;*/
border-collapse: separate;
border-spacing:0;
}
[/code]
Result!!