21 replies [Last post]
mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

I've been working on a web project and am having trouble with Firefox when I hide and unhide table rows with CSS and Javascript.

Please reference http://www.cs.xu.edu/~mulder/css/test.htm for an example.

When viewed in Firefox, the initial page loads correctly. When you click on the "+" sign, table rows should appear underneath the row in which the "+" was clicked. The problem is that Firefox drops it's table display when you unhide the table rows. Hiding the rows fixes the display.

Does anyone have any suggestions?

Thank you in advance.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

I am not sure what you mean. The page appears to work ok to me - in both FF and IE (appearance & behaviour seems to be identical).

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

Chris..S wrote:
I am not sure what you mean. The page appears to work ok to me - in both FF and IE (appearance & behaviour seems to be identical).

so, when you view in FF, it doesn't show up like the attached pic?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 46 weeks 3 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

Hi

Same here, both look the same and fine. The jpg shows a summary bit below the two rows that isn't there on the test page.

Trevor

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

Did you try to hit the plus buttons?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 46 weeks 3 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

Hi

Ah, didn't do that. Mmm. That isn't good. Quick check around. Others have reported the same problem. Solution? None.

Quick play with java.

OK, look for these two lines in your code:

el.style.display = '';
and
el.style.display = 'none';

Moz doesn't like you switching off a row like this and then switching it back on. You can experiment if you like with any other java style property and see they switch quite hapily.

Now, I'm not prepared to look any further, but I suspect the problem is because you are switching off the tr, but not the td. Consider this, how much space does a tr with no td's in take up? None.

So, I experimented with a little bit of code (you'll have to make your own) by giving the td's classes, using the getElementsByClassName on the td's, and switching their display on and off. No problems.

Get re-writing your javascript!

Hope it works!

Trevor

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

I'm also going to look into removing the rows and moving them into an invisible div.

Thanks for your perspective.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 46 weeks 3 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

Hi

Well, you can't put rows into a div, but you could put the hidden bits as a separate table, but I tried that, same problem. My guess is that FF is inheriting the hidden bit by turning things on and not turning them back on. Just switching the td's off worked. Hey ho.

BTW. Your page has an incomplete doctype. You need the url line too. Not that it affects the problem. Just that you ought to have it right!

Trevor

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

That did it.

Thanks!

I hid the td's and that caused the tr's to automatically hide and not cause problems with firefox.

Great!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

I am not so sure.

I now see the border changing on the upper part of the table when the low plus is clicked. That doesn't occur when the upper plus is clicked. If both pluses are clicked it appears that the border comes back.

If you inspect the result in DOM inspector, all the elements are present and have the appropriate display property value. There does, however, appear to be an issue with the table border. It does look like a bug and I can't say whether you can overcome it with different border properties.

Another alternative to try, is placing each set of hidden rows inside a single tbody and showing/hiding the tbody. That is in fact a neater solution than your present one, as each "+/-" now applies to one element only.

This page is a quick and dirty extension of an answer to an earlier question on these forums. It seems to manage the sort of thing you are after without any problems.

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

I just noticed that also. How gross. Grrr...

I'll try the tbody approach.

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS & J

Bad news for me. I'm using the DataGrid Control in ASP .NET v1.1. Apparently, there is no *easy* way to get a datagrid to output <tbody> and wrap some elements, but not others.

Hmm...I could do a quick DHTML javascript hack to wrap the correct <tr> elements into a <tbody> element.

It would be a one-time move on the client-side.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

I'm not sure what you mean.

Each row should be nested inside a <tbody>. e.g.

<tbody>
  <tr> ... always visible row, with toggle for id1</tr>
</tbody>
<tbody id="id1">
  <tr> ... sometimes hidden row </tr>
  <tr> ... sometimes hidden row </tr>
  <tr> ... sometimes hidden row </tr>
  <tr> ... sometimes hidden row </tr>
</tbody>
<tbody>
  <tr> ... always visible row, with toggle for id2</tr>
</tbody>
<tbody id="id2">
  <tr> ... sometimes hidden row </tr>
  <tr> ... sometimes hidden row </tr>
  <tr> ... sometimes hidden row </tr>
  <tr> ... sometimes hidden row </tr>
</tbody>

Or can't datagrid handle that?

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

DataGrids (in .NET 1.1) cannot easily handle that format. DataGrids don't output a <tbody> tag, and cannot be forced to do so easily. I'm trying to extend the datagrid class right now to fix that problem, but I'm htiting some dead ends.

I'd like to get my server control to output exactly what you have on the screen, but I want it to happen quickly and without string replacement. That way, I don't have to worry about client-side issues and cross-browser compatibility as much.

I'd also like to find a sexy way in .NET to accomplish my problem without losing a whole bunch of control in my datagrid.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 46 weeks 3 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

Hi

Just woken up, saw the thread.

The problem with hiding all the td's is that it doesn't like a completely empty row. Is it possible to have another td (empty) which is hidden by default, reveals when the others hide, and hides when the others appear?

Trevor

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

Yeha, the completely empty td is a possibility. I'll try it out and see if it "likes" that.

Ideally, I'd like to implement the <tbody> concept. I'm still fiddling with .NET to try and capture the rendering event for select TableRows.

MB

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 5 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

Would anyone mind if I moved this to Off Topic?

Verschwindende wrote:
  • CSS doesn't make pies

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

Why would this be off topic? Firefox has some definate CSS issues with hiding table rows and we're working through them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 5 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

Well from what I gathered it was more of a JS issue.

Verschwindende wrote:
  • CSS doesn't make pies

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

Not at all. It's CSS and how when hiding table rows in FireFox, the browser displays the wrong content.

Of course, we're using Javascript to apply the CSS, but there's no Javascript problems at all.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 46 weeks 3 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

Hi

Do let us know how you get on!

Trevor
PS, I would let you know of a bug in Opera for tables, should it be of interest. If you put a table inside a float that has no height defined, and the table also has no height defined, Opera leaves insufficeint space for the table! I haven't tested how widespread this bug is, but I have seen it a lot of times!

mikeismike
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2005-11-10
Posts: 12
Points: 0

Firefox: Problem Hiding/Unhiding Table Rows with CSS &amp; J

I've settled down and decided that I shouldn't be hiding individual rows within FireFox. It just doesn't work well.

Instead, I've decided to make my hidden rows separate tables. I then hide entire tables - this works very well and has reoslved my issue.

Thanks to everyone for thier $.02