SAPUI5: Disable scrollbar for sap.ui.unified.ShellLayout

Question

I am using a sap.ui.unified.ShellLayout with a toolbar at the top and a sap.ui.core.ComponentContainer underneath. The content of the component container is exchanged on navigation while the toolbar stays. Unfortunately, the whole shell (layout) has a scrollbar although only the component container should have one.

How can I disable the scrolling for the ShellLayout?

Method init in the view:

        sap.ui.unified.ShellLayout.prototype.init.call(this);
    var that = this;

    this.setHeaderVisible(false);

    // action bar
    this.oToolbar = new sap.m.Toolbar({
        transparent: true,
        content: [
            new sap.m.ToolbarSpacer(),
            new sap.m.Text({
                text: "Elektronischer Einkaufszettel"
            }),
            new sap.m.ToolbarSpacer()
        ],
        height: "3rem"
    });
    this.addContent(this.oToolbar);

    this.oComponentContainer = new sap.ui.core.ComponentContainer({
        name: 'router',
        enableScrolling: true
    });
    this.addContent(this.oComponentContainer);

    this.oFlexBox = new sap.m.FlexBox({
        alignItems: "Start",
        items: [
            new sap.m.Button({
                width: "100%",
                type: "Transparent",
                icon: "sap-icon://product",
                class: "sapUiSmallMarginEnd",
                layoutData: new sap.m.FlexItemData({
                    growFactor: 1
                }),
                press: function(oEvent) {
                    var sTarget = "Products";
                    that.onButtonClick(oEvent, that, sTarget);
                }
            }),
            new sap.m.Button({
                width: "100%",
                type: "Emphasized",
                icon: "sap-icon://cart",
                class: "sapUiSmallMarginEnd",
                layoutData: new sap.m.FlexItemData({
                    growFactor: 1
                }),
                press: [that, "ShopperMenu", that.onButtonClick]
            }),
            new sap.m.Button({
                width: "100%",
                type: "Transparent",
                icon: "sap-icon://list",
                class: "sapUiSmallMarginEnd",
                layoutData: new sap.m.FlexItemData({
                    growFactor: 1
                }),
                press: [that, "RequesterMenu", that.onButtonClick]
            })
        ]
    });
    this.addContent(this.oFlexBox);

Thanks

Answer 1

I finally found the solution in using the sap.ui.layout.FixFlex control.

Regards,

Anton