Welcome to WebmasterWorld Guest from 54.147.16.12

Forum Moderators: not2easy

Message Too Old, No Replies

visibility:collapse IE workaround

Need IE equiv

     
5:14 pm on Oct 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2620
votes: 3


I want to hide some rows in a table

So I used:

visibility:hidden;

The row doesn't display but it still holds it's place on the page causing rows above and below the hidden row to have missing space between where the hidden row is.

So I come across:

visibility:collapse;

Works great does what I want... hides the row and doesn't leave a placeholder space.

Doesn't work in any IE version.. or Safari.

Anyone know of a elegant work-around or do I have a lot of work ahead of me converting this table to something else?

For the record I think that keeping a place holder on the page is the worst behavior most anti-intuitive thing... does a hidden input box take up space in a page? No? Then why would a hidden row?

Sorry I had to rant there.

Any help would be so appreciated.

thanks

5:43 pm on Oct 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2620
votes: 3


I tried use height:0px; on the row to collapse it manually and no luck with that..

Still stuck..

6:24 pm on Oct 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2620
votes: 3


Well the reason I couldn't find a good solution was because I was looking for a visibility value

The real solution came in the display style

The solution:

Use display:none; to remove the space. To get it back you will need to use display:block; For IE and display:table-row; for FF

[edited by: Demaestro at 6:30 pm (utc) on Oct. 3, 2007]

6:32 pm on Oct 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 13, 2002
posts:662
votes: 0


actually just set display to nothing, instead of block, so it goes back to the default
7:09 pm on Oct 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2620
votes: 3


Ya it does.... thanks Gibble saves me 2 lines of JS.. sounds dumb but I am all about efficient code.

[edited by: Demaestro at 7:09 pm (utc) on Oct. 3, 2007]

9:24 pm on Oct 9, 2007 (gmt 0)

New User

10+ Year Member

joined:Oct 9, 2007
posts:1
votes: 0


Good news! Although "visibility: collapse" works wonderfully in Mozilla browsers, of course, it does not work in Internet Explorer. Fortunately, however, I found out that "display: table-row-group" for "<tbody>" has the same (desired) effect in Mozilla, Opera and IE (it's a default value for group of table rows). I haven't tested it but you should use "display: table-row" for individual rows. Cheers!