View Full Version : Solved: Panel absolute layout - child panels wont be side by side

25 Aug 2014, 7:27 PM
Solved: I had neglected to compile the sass since including the Ext.layout.container.Absolute. So, critical css was missing! Doh!


I have a panel using absolute layout and two child panels that I want to render beside each other. I want to use absolute because there will actually be an unknown number of child panels and the user can drag them to the position they want them in.

With the following dom generated by the component you can see in the screen shot that the second panel is at the correct left position but while the top property says it is 23px it is actually about 123px ie it seems to be offset by the height of the first child panel. The child panels are dragable and I can drag it into position, it just wont render in that position! When I drag it the 'top' property becomes negative.

<div id="vOrgChartPanel-1087-body" class="x-panel-body x-panel-body-default x-abs-layout-ct x-panel-body-default x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="width: 494px; height: 513px; left: 0px; top: 25px;">
<span id="vOrgChartPanel-1087-outerCt" style="display: table; width: 100%; table-layout: fixed; height: 100%;">
<div id="vOrgChartPanel-1087-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;">
<div id="vOrgChartRole-1097" class="x-panel x-abs-layout-item x-panel-default" style="left: 14px; top: 20px; width: 200px; height: 100px; right: auto;" tabindex="-1">
<div id="vOrgChartRole-1098" class="x-panel x-abs-layout-item x-panel-default" style="left: 230px; top: 23px; width: 200px; height: 100px; right: auto;" tabindex="-1">


I have tried manipulating the dom directly via the dom inspector and nothing I do will correct the lineup. The same problem occurs in both FF and Chrome.

Any ideas?


Gary Schlosberg
26 Aug 2014, 12:43 PM
Glad to hear you've gotten things working, and thanks for following up here.