sap.ui.layout.SplitPane Doesn't Apply SplitterLayoutData - sapui5

Question

I am trying to set the size on sap.ui.layout.SplitPane on the left side as following:
<Page title="Where used">
<l:ResponsiveSplitter defaultPane="default">
<l:PaneContainer>
<l:SplitPane requiredParentWidth="400">
<l:layoutData>
<l:SplitterLayoutData size="20%"/>
</l:layoutData>
<Panel height="100%">
<Label text="Hello"/>
</Panel>
</l:SplitPane>
<l:SplitPane requiredParentWidth="400">
<Panel height="100%">
<Label text="Hello"/>
</Panel>
</l:SplitPane>
</l:PaneContainer>
</l:ResponsiveSplitter>
</Page>
As you can see on the code, I tried to achieve with
<l:SplitterLayoutData size="20%"/>
But the size does not apply at all. What am I doing wrong?
I looked at this example: https://github.com/SAP/openui5/blob/master/src/sap.ui.layout/test/sap/ui/layout/ResponsiveSplitter.html#L106, [Result]

Answer 1

Update: The fix should be available as of UI5 version 1.60. Otherwise, please keep reading..
Just figured out that it only works if the aggregation <l:layoutData> comes after the default aggregation.
<l:SplitPane requiredParentWidth="400">
<Panel height="100%">
<Label text="Panel 1"/>
</Panel>
<l:layoutData>
<l:SplitterLayoutData size="20%"/>
</l:layoutData>
</l:SplitPane>
.. which shouldn't actually matter. I'll analyse the source code why it matters and update the answer later.[1] But this is how you can "fix" it so that it works for now.
Source: https://embed.plnkr.co/0yo35xOiSmF5eG6R?show=V.view.xml,preview
[1]: It turns out that SplitPane has an overwritten mutator for the layoutData aggregation:
SplitPane.prototype.setLayoutData = function(oLayoutdata) {
var oContent = this.getContent();
if (oContent) {
return oContent.setLayoutData(oLayoutdata);
} else {
return this;
}
};
source
As you can see, it applies the layout data not to itself but to its content. If the content doesn't exist at that moment, the <layoutData> is just ignored. And since XML nodes are evaluated sequentially one by one, the Panel (content) had to come first before the SplitterLayoutData.
IMO this is clearly a bug in the framework since the framework has to assure that the outcome is always the same no matter in which order aggregations were defined (content <--> layoutData).

Answer 2

Please check this: JS Fiddle
oResponsiveSplitter = new sap.ui.layout.ResponsiveSplitter({
defaultPane: "defaultPane",
rootPaneContainer: [
new sap.ui.layout.PaneContainer({
orientation: "Horizontal",
panes: [
new sap.ui.layout.PaneContainer({
// orientation: "Horizontal",
panes: [
new sap.ui.layout.SplitPane({
demandPane: true,
content: new sap.m.Panel({
headerText: "1",
content: new sap.m.Text({text: lorem + lorem})
}),
requiredParentWidth: 400
}),
new sap.ui.layout.SplitPane({
demandPane: false,
content: new sap.m.Panel({
headerText: "2",
content: new sap.m.Text({text: lorem + lorem})
}),
requiredParentWidth: 400,
layoutData: new sap.ui.layout.SplitterLayoutData({
size: "20%"
})
}),
new sap.ui.layout.SplitPane({
demandPane: true,
content: new sap.m.Panel({
headerText: "3",
content: new sap.m.Text({text: lorem + lorem})
}),
requiredParentWidth: 400,
}),
]
})
]
})
]
});
I think it answers your problem.
Also, I understand that here SplitterLayoutData size works as expected when the layout is horizontal.