Skip to Content
avatar image
Former Member

Master/Detail+ObjectHeader+IconTabBar: How to Scroll only IconTab content?

Hi,

I have a master/detail application .

the detail page consists of an ObjectHeader and an IconTabBar with several Tabs.

I want especially the IconTabBar to be always visible and have scrolling only on the IconTab content. How do I achieve this best?

Regards,

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Oct 05, 2017 at 12:32 PM

    Hi Ramji,

    If you want IconTabBar always expanded, their is a property in IconTabBar Control expandable="false" , next one

    you can use panel and scrollcontainer inside IconTabFilter to enable scrolling the content of IconTabBar.

    for example:

    <semantic:DetailPage title="detailTite">
    	<semantic:content>
    		<ObjectHeader id="objectHeader" title="{ContactName}"></ObjectHeader>
    		<IconTabBar id="iconTabBar" class="sapUiResponsiveContentPadding" expandable="false">
    			<items>
    		 	    <IconTabFilter id="iconTabBarFilter1" icon="sap-icon://hint">
    				<Panel height="200px">
    				     <ScrollContainer>
                                              <!--content code here-->
    				     </ScrollContainer>
                                    </Panel>
    			     </IconTabFilter>
    				
                                <IconTabFilter id="iconTabBarFilter2" >
                                   <Panel height="200px">
    				     <ScrollContainer>
                                              <!--content code here-->
    				     </ScrollContainer>
                                    </Panel>
                                </IconTabFilter>
    			</items>
    		</IconTabBar>
    	</semantic:content>
    </semantic:DetailPage>
      

    Note: Instead of using Panel and ScrollContainer you can also handle this by setting height to IconTabBarContent using your own custom css.

    Regards,

    Vedaradhya.

    Add comment
    10|10000 characters needed characters exceeded