SAPUI5 - Responsive sap.m.Table

0
votes

I created a sap.m.table with its header headerToolbar.

In the header, I put the title and two SelectList separated by a ToolbarSpacer.

The problem is that when the screen size is small the elements on the headerToolbar don't go back to the next line and are truncated ...

On a large screen:

enter image description here

On a small screen:

enter image description here

I want the header to be responsive, that is the elements should go to the next line if there is no sufficient space.

Here is the code:

<headerToolbar height="auto">

 <Toolbar height="auto">

          <content>

            <Title id="tableHeader" text="..."/>

            <ToolbarSpacer />

             <Label text="..." lableFor="sl1"/>
              <SelectList id="sl1"
                enabled="true">
                <core:Item key="..." text="..." />
                <core:Item key="..." text="..." />
              </SelectList>

              <ToolbarSpacer />

             <Label text="..." lableFor="sl2"/>
              <SelectList id="sl2"
                enabled="true">
                <core:Item key="..." text="..." />
                <core:Item key="..." text="..." />
              </SelectList>

              <ToolbarSpacer />

                </content>

          </Toolbar>

        </headerToolbar>
2
headersapui5toolbarresponsive

2 Answers

0
votes

Why you don't use OverflowToolbar instead of Toolbar? Is the official responsive Toolbar https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.OverflowToolbarFooter/preview

If you don't like it and want this "pop-in" behaviour you have described, I guess you can put a FlexBox inside your Toolbar and set the direction property depending on the "device" model. Using expression binding will be something like this:

new sap.m.FlexBox({
    direction: "{= ${device>/isPhone} ? 'Column' : 'Row' }",
    items: [
        //Your content goes here            
    ]
})

More here: https://sapui5.hana.ondemand.com/#docs/guide/69a8e469fbde46e7b8916250080effbd.html

0
votes

You can enable horizontal table scrolling in the css:

.enableTableScrolling {
    overflow-x: scroll;
}

After that table will not be truncated.