Bug Tracker

Ticket #24 (closed bug: fixed)

Opened 9 years ago

Last modified 8 years ago

Make fade effects work on tables

Reported by: steven@… Owned by:
Priority: major Milestone: 1.1.3
Component: effects Version: 1.1.2
Keywords: Cc:
Blocking: Blocked by:


Effects don't work on tables, because in CSS2-compatible browsers, table elements have "display: table" "display: table-row" and "display: table-cell". Trying to apply revealing effects will end up setting "display: block", and destroying the table layout.

The following patch tries to fix this by setting the right display style based on the element's HTML tag. Fade effects work on table and td, but not on tr. Show/hide should probably work as well.

Doing size-dependant effects will probably not work well though, as you can't just isolate table elements with position: absolute to measure them. Still, it's a start.


Change History

comment:1 Changed 9 years ago by john

  • Version set to 1.0
  • Component changed from core to fx
  • Milestone set to 1.0

comment:2 Changed 9 years ago by john

  • Version 1.0 deleted
  • Milestone 1.0 deleted

comment:3 Changed 8 years ago by laurenty@…

Keep in mind that IE doesn't support the table display properties table-row, table-cell, etc... And I don't know if that was fixed in IE7

comment:4 Changed 8 years ago by john

  • Summary changed from Make show/hide and fade effects work on tables to Make fade effects work on tables
  • Type changed from enhancement to bug
  • Version set to 1.1
  • Milestone set to 1.1

I think this can be resolved by simply not tampering with style.display when only opacity is being animated. (For right now, let's only worry about fadeIn and fadeOut - show/hide are much much harder)

comment:5 Changed 8 years ago by brandon

I've adapted the patch a little to work with fadeOut and fadeIn.


Apparently Safari and Opera do not support setting opacity for elements with display: table-row. This means that fading TR elements will not work properly in Safari and Opera. So far table, td and th are working fine in all browsers.

Opinions? The relevant lines are around 5113.

comment:6 Changed 8 years ago by sam

Until this is patched (in stable, not SVN), the workaround I have used is to wrap the table in a div and do the effect on that.


comment:7 Changed 8 years ago by brandon

Sam, I think your workaround might best approach to take. Browsers just act weird with these tables. Just, not messing with display or actually trying to use the appropriate display property will not work cross browser.

comment:8 Changed 8 years ago by joern

  • Version 1.1 deleted
  • Milestone 1.1 deleted

comment:9 Changed 8 years ago by mathieuma@…

The issue is the same with toggle and show / hide.

The div warpping issue is nice when working on a complete table, but what do you do when you want to work on a cell or a row ?

comment:10 Changed 8 years ago by carlof

Wrapping the selected tr:

$("tr#id").prependTo('<div class="foo"></div>');

the fade out effect behaves like hide, but the speed paramater is ignored.

comment:11 Changed 8 years ago by GoodIsh

I just threw this in where ever I was toggling a table:


Hopefully a fix will come for this to get back the old display value instead of changing it to block, but this hack works fine for now.

comment:12 Changed 8 years ago by john

  • Status changed from new to closed
  • Version set to 1.1.2
  • Resolution set to fixed
  • Milestone set to 1.1.3

This should be fixed in SVN rev [1531]. You can now do fade animations on table cells.

Note: See TracTickets for help on using tickets.