Skip to Content
avatar image
Former Member

Scroll IconTabBar content with fixed Header

Hi Guys, I´m pretty new in the UI5 world and I have the requierment to make a fixed header and icon tab bar so the content can be scrolleable.

Below you can find the code that i'm implementing. My problem is focused on the header, It has to be fixed along with the IconTabBar, if I use the stretchContentHeight="true" property, it makes my header disappear.

Any sugestions about how to resolve this issue?

Thanks in advance.

Chris

<content>
    <!-- Header Data  -->
    <mvc:XMLView viewName="appvision360.view.Header"/>
    <IconTabBar	id="idIconTabBarMulti" headerMode="Inline"
                class="padding sapUiResponsiveContentPadding">
        <items>
            <IconTabFilter icon="sap-icon://customer" key="Customer" 
                           tooltip="Customer" >
                <ScrollContainer height="100%" width="100%"
                                 vertical="true">
                    <!-- Content 1  -->
                    <mvc:XMLView viewName="app.view.content1"/>
                </ScrollContainer>
            </IconTabFilter>
            <IconTabFilter icon="sap-icon://account">
                <ScrollContainer height="100%" width="100%" 
                                 vertical="true">
                    <!-- Content 2  -->
                    <mvc:XMLView viewName="app.view.content2"/>
                </ScrollContainer>
            </IconTabFilter>
        </items>
    </IconTabBar>
</content>
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Oct 05, 2017 at 05:11 AM

    Use the following code :

    	<IconTabBar
    		id="ictb"
    		class="sapUiResponsiveContentPadding">
    		<items>
    			<IconTabFilter
    				icon="sap-icon://hint">
    				<Text text="Info" />
    			</IconTabFilter>
    			<IconTabFilter
    				icon="sap-icon://attachment"
    				count="3">
    				<Text text="Attachment" />
    			</IconTabFilter>
    			<IconTabFilter
    				icon="sap-icon://notes"
    				count="12">
    				<Text text="Notes" />
    			</IconTabFilter>
    			<IconTabFilter
    				icon="sap-icon://group">
    				<Text text="Employee" />
    			</IconTabFilter>
    		</items>
    	</IconTabBar>
    
    Add comment
    10|10000 characters needed characters exceeded