Re: Positioned Layout proposal

?
--------------------------------------------------
From: "Shelby Moore" <shelby@coolpage.com>
Sent: Saturday, October 23, 2010 7:38 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: "Boris Zbarsky" <bzbarsky@mit.edu>; "www-style list" <www-style@w3.org>
Subject: Re: Positioned Layout proposal

>
> Oh it will?  I thought you would need to specify another column of rows in
> the Flexbox syntax.  In any case, I think we agree that Flexbox would
> enable the semantics I want to express in the above example.
>
> However, as Tab Atkins pointed out, Flexbox won't express all the possible
> semantics or relative layout. Flexbox is suited to minimizing unused space
> within a container.  Flexbox does nothing for generalized relative
> placement of elements.

"all the possible semantics or relative layout" sounds like
"happiness to everybody and yet free of charge".
I mean we would like to implement the idea but that small constraint
at the end of it ...

>
>> Obviously you do not need any artificial DOM elements here.
>>
>> See: "3.5. flow:"template"" in
>> http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
>
> Oh I see, you were using Flex-Layout syntax, not Flexbox.  Any way, I
> think Flexbox can handle it too, just need another column of rows within
> the right pane.
>
>> To calculate flex units you will not need generic constraint solver.
>> The algorithm of flex computations is not more complex than for tables.
>
> Agreed.  Flexbox is only just a relative width property for tables.  It is
> a very simple conceptuation extension of tables and will be very helpful.
> We should do that first, before any attempt at a more generalized relative
> positioning constraint solution.
>

Just in case:

Below is your layout with use of flex units and the flow.

Screenshot on various view and content sizes is here:
http://terrainformatica.com/w3/temp-flex-layout.png

<html>
  <head>
    <title>Sciter: W3C demo</title>
    <style>
    body
    {
      width: *;
      height: *;
      flow: "1 1"
            "2 3";
    }
    div#header
    {
      width:*;
      border:2px solid gold;
    }
    div#leftPane
    {
      border:2px solid gold;
      width:100px;
      height:*;   /* spans full height */
      overflow:auto;
    }
    div#rightPane
    {
      border:2px solid gold;
      padding:2px;
      height:*;
      border-spacing:2px;
    }

    div#rightPane > richtext
    {
      width:*; /* spans full width */
      height:min-intrinsic; /* height needed to content in full*/
      max-height:50%; /* but not more than 50%, min/max constraint, sic! */
    }

    div#ChatText
    {
      width:*; height:*;
      border:2px solid green;
      overflow-y:scroll;
    }
    </style>
  </head>

<body>
  <div id=header>
    some header content, even has a float:right so it fills the width of 
viewport
  </div>
  <div id='leftPane'>left pane</div>
  <div id='rightPane'>
      <richtext><b>editable</b> area</richtext>
      <div id='ChatText'>chat text </div>
  </div>
</body>
</html>


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 23 October 2010 19:30:04 UTC