Re: [css3-flexbox] visibility:collapse on flexbox items

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