- From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
- Date: Fri, 30 Sep 2011 19:45:27 -0700
- To: "Alex Mogilevsky" <alexmog@microsoft.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: <www-style@w3.org>
-----Original Message----- From: Alex Mogilevsky Sent: Friday, September 23, 2011 3:36 PM To: Tab Atkins Jr. Cc: www-style@w3.org Subject: RE: [css3-flexbox] visibility:collapse on flexbox items >... >It seems that if "visibility:collapse" is targeting the same kind of >dynamic scenarios as in tables, it should behave exactly as "display:none" >in flexbox (no extra spacing in justify). It doesn't seem super useful then >- but it does make it easier to show/hide items without wiping their >'display' property (your favorite inner/outer display issue). In fact 'visibility:collapse' should not and does not behave as 'display:none'. Consider flow:horizontal container that has two children. Suppose that one of these children is declared as .hor-child:nth-child(1) { height:20px; } .hor-child:nth-child(2) { visibility:collapse; height:40px; } then height calculation of the container shall take height of collapsed element into consideration (so container will be 40px height). So when at some point you will say: .hor-child:nth-child(2).expanded { visibility:visible; } the container will not change its height. The 'collapse' means collapse block progression dimension of the element keeping other dimension intact. That is how visibility:collapse; works in tables. tr {visibility:collapse;} and tr {display:none;} produce different results. Here is an example (use anything but not WebKit as it has bug here): <!DOCTYPE html> <html> <head> <title></title> <style> tr:nth-child(1) { visibility:collapse; } </style> </head> <body> <table border> <tr><td>longlonglonglonglonglonglonglonglonglong</td></tr> <tr><td>short</td></tr> </table> </body> </html> Cheers. -- Andrew Fedoniouk http://terrainformatica.com
Received on Saturday, 1 October 2011 02:45:57 UTC