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)

• javascript
• xml
• sapui5

Share Improve this question Follow edited Jun 1, 2017 at 12:36 Jaro 1,75411 gold badge1616 silver badges3636 bronze badges asked Jun 1, 2017 at 9:06 wckrtwckrt 1311 gold badge11 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

FixFlex 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/