We’re really struggling with layout.
Yishay just mentioned the fact that padding is not working, but the problems
seem to go much deeper than that.
1. VerticalLayout has the following code:
for (i = 0; i < n; i++)
{
var child:WrappedHTMLElement =
children[i];
child.flexjs_wrapper.setDisplayStyleForLayout('block');
if (child.style.display === 'none')
{
child.flexjs_wrapper.setDisplayStyleForLayout('block');
}
else
{
// block elements don't measure
width correctly so set to inline for a second
child.style.display =
'inline-block';
maxWidth = Math.max(maxWidth,
child.offsetLeft + child.offsetWidth);
child.style.display = 'block';
}
child.flexjs_wrapper.dispatchEvent('sizeChanged');
}
There is a number of problems that I can see with this. Firstly, it’s horribly
inefficient:
child.style.display =
'inline-block';
maxWidth = Math.max(maxWidth,
child.offsetLeft + child.offsetWidth);
The above will force a browser redraw at every step of the loop. If you have
hundreds of children, there will be hundreds of redraws just to figure out the
children width. If anything, there should probably be three loops: One to set
the inline-blocks, The second to measure all the children (the first measure
would trigger a redraw, but subsequent ones not) The third to set inline-block
back.
Secondly, there’s only a need to measure the children if the container is sized
to content. If the container has a fixed width or a percentage width, I don’t
see why the children should be measured at all. The only exception I can see is
if there is overflow:auto.
Thirdly, I don’t understand how setting the child to inline-block helps. What
about the grandchildren? Don’t those need to be measured too?
Fourthly, Both Horizontal and VerticalLayout have code which temporarily sets
inline-block. BasicLayout does not, and I don’t understand why there’s a
difference. (BasicLayout has the same re-rendering problem though.)
2.
if (!hasWidth && n > 0 && !isNaN(maxWidth)) {
var pl:String = scv['padding-left'];
var pr:String = scv['padding-right'];
var npl:int = parseInt(pl.substring(0,
pl.length - 2), 10);
var npr:int = parseInt(pr.substring(0,
pr.length - 2), 10);
maxWidth += npl + npr;
contentView.width = maxWidth;
}
This seems totally wrong. Why is the padding being added when we’re using
box-sizing: border-box?
3. Percentage size seems to be set based on the children rather than the
parents.
4. I’m not sure I understand the layout lifecycle very well. We have had cases
where children did not seem to be layout, and forcing a layout seemed to be
very difficult to do.
Harbs
