Here’s one example very similar to the RoyaleStore problem:
<js:Container x="0" y="0" width="100%" height="100%">
<js:beads>
<js:OneFlexibleChildVerticalLayout
flexibleChild="dockAndOuterContainer"/>
</js:beads>
<components:ControlsPalette id="controlPalette"/>
<js:Container x="0" y="40" width="100%"
id="dockAndOuterContainer" height="0%"
style="align-items:stretch;background-image:assets/images/bg.png;">
Which produces:
<div class="Container" style="left: 0px; top: 0px; width: 100%; height: 100%;
overflow: visible; display: flex; flex-flow: column;">
<div id="controlPalette" class="Container" style="width: 100%; overflow:
visible; display: flex; flex-flow: row; flex-grow: 0; flex-shrink: 0;"></div>
<div id="dockAndOuterContainer" class="Container" style="left: 0px; top: 40px;
width: 100%; height: 0%; align-items: stretch; background-image:
url("assets/images/bg.png"); display: flex; overflow: visible;
flex-flow: row; flex: 1 0 0%;">
The dockAndOuterContainer needed the y=“40” or it occupies the same space as
the controlPalette. With a default of position: relative this is no longer
needed.
I don’t know the full details, but flexbox does not allow for the space of the
first item unless position is relative.
Here’s another one:
<js:Group id="contentGroup" width="100%" height="100%">
<js:Label x="20" y="20"
text="{locStr.UPLOAD_YOUR_IMAGE}"/>
<div class="Container" style="width: 100%; height: 100%; overflow: visible;
position: absolute;">
<div id="contentGroup" class="Group" style="width: 100%; height: 100%;
position: absolute;">
<span class="Label" style="white-space: nowrap; left: 20px; top:
20px;">UPLOAD YOUR IMAGE</span>
In this case, I needed to set the style directly (I don’t remember why, but I
had a *very* hard time getting it to go where it belonged). The component had
nothing which prevented the correct positioning itself, but it’s nested inside
another component which uses a flexbox layout. I think that had something to do
with the positioning problem. These issues are really hard to diagnose.
Again, a default of position: relative is the solution to this problem, and
with that default, hard-coding the top and left values is no longer necessary.
My takeaway is simply that a default of relative gives more predictable results
and layouts do not need to care what other layouts they are nested inside.
That’s really important for predictable results in a framework.
> On Jun 6, 2018, at 9:43 PM, Alex Harui <[email protected]> wrote:
>
> Can you provide more details where you needed to set x,y in your app?
