Re: Additive vs absolute flexes

Please see my answers below:


From: Robert O'Callahan 
Sent: Tuesday, May 18, 2010 2:25 AM
To: www-style 
Cc: sylvain.spinelli@kelis.fr 
Subject: Additive vs absolute flexes


Sylvain Spinellli, a XUL developer, gave me some feedback on use-cases for additive flexes, and asked me to summarize for the list.

Some example markup:
   <slotSet height="650" orient="vertical" flex="5">
           <slotContents id="contentsSlot" height="400" flex="5"/>
           <slot id="bottomSlot" height="250" flex="1">
               <simpleSearchView/>
           </slot>
   </slotSet>
Goals:
-- For very large windows, 'contentsSlot' should get approximately 5 times more vertical space than 'bottomSlot'
-- But 'bottomSlot' has some controls and needs a reasonable amount of space to be readily usable. So when the window height is 650px, 'bottomSlot' should get 250px and the 'contentsSlot' should get 400px.
-- However, if the window height gets very small then at least some of both 'bottomSlot' and 'contentsSlot' should be visible (so a nonzero min-height is not appropriate here).

1) To get "approximately 5 times" on this particular setup you should have height of the view equal to 6500px with (10% error). 
And if that "approximately" means 5% error then 13000px. I don't think this "approximately" makes any sense - 
it rather appears as a hack. If you would use absolute flex units then you will be able to make mental model of your 
layout. With additive flexes it is very hard to predict what you will get and why.

Practically it is enough to define: 
  content-slot { height:4*; }
  bottom-slot { height:2.5*; }
and it will work with the same effect on practical view sizes.

If such nonlinear setup is really needed then you can combine plain old percents with flexes to get 
nearly the same effect.

The attached images show the desired rendering for small windows and large windows.

Screenshots that you provided are more complex than what you have defined above.
They contain non-flexible sections. If you will try to define that sections and left flexes only 
for the editor widget and list view widget then it will be completely different picture.
And again there is horizontal splitter there - I doubt it will always follow your additive flex model.

Further comments:

  There is something I don't understand. In xul, if you don't set an explicit width, the intrinsic content width is used instead. Setting a width is only an override of the " intrinsic content width". In the W3C simplification idea "just size each child proportionally to its flex value", intrinsic content width will not be take in account at all ? In this case I think we can find many other problematic use cases : 

    a.. in classic dialog box, set flex=1 on 3 buttons in a hbox become unusable (long labels will be cut prematurely), 

    b.. in a tree or listbox columns width will not be auto-adapted correctly (If I remember well, it was one of the big limit I found in extJs ui...), 

    c.. etc.
I followed up to clarify these comments, especially the first one. This use-case is a horizontal box containing three labeled buttons with different length labels. When the box is as wide as the sum of the lengths of the labels, he wants each button to be the width of its label. When it gets wider than the ideal width, I think he wants each button to get an equal share of the extra space. When it gets narrower than the ideal width, he wants each button to lose an equal amount of space. He does not want one or more buttons disappearing beyond the edge of the box.

Ha! If you have no ability to define paddings in flexes then sure you will need workarounds with additive model. 

With flex units you can write just this:

button.greedy { padding-left:*; padding-right:*; margin:4px;  }

and you will get results as on this screenshot:
http://terrainformatica.com/w3/flex-paddings.png

This, I believe, is exactly what your designer wanted. 
And usually they add flexes to margins too.


Thanks Sylvain!

Rob
-- 
"He was pierced for our transgressions, he was crushed for our iniquities; the punishment that brought us peace was upon him, and by his wounds we are healed. We all, like sheep, have gone astray, each of us has turned to his own way; and the LORD has laid on him the iniquity of us all." [Isaiah 53:5-6]

What kind of flexes did he use for the representation of iniquity of us all? That is the question.
It would be unfair if he used additive ones.

Cheers.

-- 
Andrew Fedoniouk

http://terrainformatica.com