Here is a minimalistic example:
<mvc:View
controllerName="sap.ui.demo.wt.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
displayBlock="true">
<App>
<pages>
<Page title="Home"
width="100%" height="100%">
<content>
<l:FixFlex
class="sapUiTinyMarginTopBottom"
vertical="false"
minFlexSize="1"
fixFirst="false">
<l:flexContent>
<List
width="100%"
showSeparators="Inner">
<items>
<StandardListItem text="Row 1"/>
<StandardListItem text="Row 2"/>
<StandardListItem text="Row 3"/>
</items>
</List>
</l:flexContent>
<l:fixContent
class="sapUiTinyMarginTopBottom"
height="100%">
<Button icon="sap-icon://add" press="onPress">
<layoutData>
<FlexItemData alignSelf="Center"></FlexItemData>
</layoutData>
</Button>
</l:fixContent>
</l:FixFlex>
</content>
</Page>
</pages>
</App>
I want to have the Button aligned in the Center and not at the top auf the box/layout.
Is FixFlex layout the right one? Important for me is that I want to have multiple lists one above the over so they have the same size (they are in table)
Here is a minimalistic example:
<mvc:View
controllerName="sap.ui.demo.wt.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
displayBlock="true">
<App>
<pages>
<Page title="Home"
width="100%" height="100%">
<content>
<l:FixFlex
class="sapUiTinyMarginTopBottom"
vertical="false"
minFlexSize="1"
fixFirst="false">
<l:flexContent>
<List
width="100%"
showSeparators="Inner">
<items>
<StandardListItem text="Row 1"/>
<StandardListItem text="Row 2"/>
<StandardListItem text="Row 3"/>
</items>
</List>
</l:flexContent>
<l:fixContent
class="sapUiTinyMarginTopBottom"
height="100%">
<Button icon="sap-icon://add" press="onPress">
<layoutData>
<FlexItemData alignSelf="Center"></FlexItemData>
</layoutData>
</Button>
</l:fixContent>
</l:FixFlex>
</content>
</Page>
</pages>
</App>
I want to have the Button aligned in the Center and not at the top auf the box/layout.
Is FixFlex layout the right one? Important for me is that I want to have multiple lists one above the over so they have the same size (they are in table)
Share Improve this question edited Jun 1, 2017 at 12:36 Jaro 1,7541 gold badge16 silver badges36 bronze badges asked Jun 1, 2017 at 9:06 wckrtwckrt 131 gold badge1 silver badge4 bronze badges1 Answer
Reset to default 2FixFlex is used to split up the space between two areas: the fix one which has a fixed dimension and the flex one which is flexible and will take up the rest of the space.
If your goal is to have the List to fill up the remaining space on the screen and the button to have a fixed width, then it is ok to use it. For aligning the button in the center (vertically), I don't think that the FixFlex will help you that much. One idea would be to surround the button in a FlexBox:
<HBox height="100%" alignItems="Center">
<Button icon="sap-icon://add" press="onPress" />
</HBox>
You can see a working version of this here: https://jsfiddle/amnswh85/1/
Another option would be to ditch the FixFlex pletely and use just a FlexBox and play around with the growFactor of each item:
<HBox width="100%" alignItems="Stretch">
<List width="100%" showSeparators="Inner">
<items>
<StandardListItem title="Row 1" />
<StandardListItem title="Row 2" />
<StandardListItem title="Row 3" />
</items>
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</List>
<Button icon="sap-icon://add" press="onPress">
<layoutData>
<FlexItemData alignSelf="Center"/>
</layoutData>
</Button>
</HBox>
You can find a working version of this here: https://jsfiddle/amnswh85/