- From: Ojan Vafai <ojan@chromium.org>
- Date: Mon, 3 Oct 2011 14:36:07 -0700
- To: Andrew Fedoniouk <news@terrainformatica.com>
- Cc: Alex Mogilevsky <alexmog@microsoft.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, www-style@w3.org
- Message-ID: <CANMdWTtBCG=WNwUfD8Ye30_8yQK9nbk8pdREgL-inUeP9x4UYw@mail.gmail.com>
Now that I understand the behavior of visibility:collapse in tables, I don't think we should extend the behavior elsewhere. We should just have visibility:collapse work the same way on flexboxes as it does elsewhere (i.e. like visibility:hidden). Otherwise, visibility:collapse becomes this complicated beast that noone can use because the rules are different for each display type. I agree with Alex that we need a way to show/hide items without wiping their display property, but we already have that with the "hidden" attribute (see http://www.whatwg.org/specs/web-apps/current-work/#hidden-elements). On Fri, Sep 30, 2011 at 7:45 PM, Andrew Fedoniouk <andrew.fedoniouk@live.com > wrote: > > -----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>**longlonglonglonglonglonglonglo**nglonglong</td></tr> > <tr><td>short</td></tr> > </table> > > </body> > </html> > > Cheers. > > -- > Andrew Fedoniouk > > http://terrainformatica.com > > >
Received on Monday, 3 October 2011 21:36:52 UTC