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

-----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