Reputation: 19
IconTabBar with stretchcontentheight makes my header disappear in SAPUI5

I have this issue where I want to have the scrollbar active only for the content of my IconTabBar, while keeping the header fixed. I read here in stackoverflow that I should put all the content inside a ScrollContainer, and then set the stretchContentHeight="true".
But this option kills my header.
this is my code
<mvc:View
   controllerName="Quickstart.App"
   displayBlock="true"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:l="sap.ui.layout"
   xmlns:core="sap.ui.core"
   xmlns:tnt="sap.tnt"
   height="100%">
   <App id="app">
     <Page id="intro" showHeader="false" enableScrolling="false">
  
         <tnt:ToolHeader height="10rem">

            <Image src="./images/image.png"/>
            <Text text="title" wrapping="false" />
            <ToolbarSpacer />
            <Button text="Feedback" icon="sap-icon://feedback" type="Transparent" press="onPressFeedback"/>
         </tnt:ToolHeader>

         <IconTabBar
            id="idIconTabBarNoIcons"
            items="{/Sheet1}"
            class="sapUiResponsiveContentPadding"
            expandable="false"
            backgroundDesign="Transparent"
            applyContentPadding="false"
            stretchContentHeight="true">
            <items>
               <IconTabFilter text="{category_title}" key="info">
                  <Toolbar class="toolbar_boarder" design="Transparent">
                     <ToolbarSpacer/>
                     <Button text="Sort" tooltip="Order Alphabetically" id="IdSortButton" width="70px" press="onPressSort" icon="sap-icon://alphabetical-order" type="Ghost"/>
                     <Button id="IdExpandButton" tooltip="Additional Information" text="Collapse" class="sapUiTinyMarginEnd" width="101px" press="onPressExpand" icon="sap-icon://collapse-all" type="Ghost"/>
                  </Toolbar>
                  <ScrollContainer id="Scroll" class="sapUIBody" height="100%" width="100%" horizontal="false" vertical="true">
                  <l:Grid containerQuery="true" content="{path:'tools', templateShareable:false}" id="gridId">
                     <Panel class="iconFilters" fieldGroupIds="idPanel" >
                        <HBox>
                           <!-- <core:Icon press="onPressToolIcon"
                              src="{tool_icon_url}" size="2rem" color="Default" class="" /> -->
                              <Image src="{tool_icon_url}" width="2.2rem" press="onPressToolImage"></Image>
                           <Link text="{tool_title}" wrapping="true" target="_blank"    href="{tool_redirect_url}" class="sapUiTinyMargin title_header"/>
                        </HBox>
                        <!-- Control the size of the line before badges -->
                        <Toolbar height="6px" width="75%"></Toolbar>
                        <HBox items="{path:'badges', templateShareable:false}"  height="1rem" justifyContent="End" class="drawline">
                           <core:Icon size="1rem" src="{badge_css_url}" tooltip="{badge_hover_text}" class="badgePadding" />
                        </HBox>
                        <VBox height="11rem">
                        <Label text="Use Cases" class="sapUiTinyTop" design="Bold"/>
                        <List
                           items="{path:'usecases', templateShareable:false}"
                           includeItemInSelection="true">
                           <CustomListItem>
                              <HBox class="listItems">
                                 <Text text="• " class="items_circle" />
                                 <FormattedText htmlText="{item}" />
                              </HBox>
                           </CustomListItem>
                        </List>
                        </VBox>
                        <VBox height="11rem">
                        <Label text="Strengths" class="sapUiSmallTop" design="Bold"/>
                        <List
                           items="{path:'strengths', templateShareable:false}"
                           includeItemInSelection="true">
                           <CustomListItem>
                              <HBox class="listItems">
                                 <Text text="• " class="items_circle" />
                                 <Text
                                    wrapping="true" text="{item}"/>
                              </HBox>
                           </CustomListItem>
                        </List>
                        </VBox>
                        <VBox height="5rem" fieldGroupIds="hideShowElements" visible="true">
                           <Label text="Best Practices" class="sapUiSmallTop" design="Bold" fieldGroupIds="hideShowElements"/>
                             <List
                                items="{path:'best_practices', templateShareable:false}"
                                includeItemInSelection="true">
                                <CustomListItem>
                                  <HBox class="listItems">
                                     <Text text="• " class="items_circle2" />
                                     <Link wrapping="true"
                                      text="{best_practices_name}"
                                      target="_blank"
                                      href="{best_practices_url}" />
                                  </HBox>
                                </CustomListItem>
                             </List>
                        </VBox>
                        <VBox class="" height="5rem" visible="true" fieldGroupIds="hideShowElements">
                           <Label text="Content Responsibility" class="sapUiSmallTop" fieldGroupIds="hideShowElements" design="Bold" visible="true"/>
                           <List
                              items="{path:'content_responsibility', templateShareable:false}"
                              includeItemInSelection="true">
                              <CustomListItem>
                                 <HBox class="listItems">
                                    <Text text="• " class="items_circle" />
                                    <Text
                                       wrapping="true" text="{item}"/>
                                 </HBox>
                              </CustomListItem>
                           </List>
                        </VBox>
                        <VBox class=" conf_move_down" height="3.5rem" visible="true" fieldGroupIds="hideShowElements">
                           <Label text="Confidentiality Level"  design="Bold" fieldGroupIds="hideShowElements"/>
                           <HBox class="listItems">
                              <Text text="• " class="items_circle2" />
                              <Link wrapping="true"
                                 text="{confidentiality_level}"
                                 target="_blank"
                                 href="{confidentiality_level_url}" />
                           </HBox>
                        </VBox>
                        <VBox class=" expandClassTrue" height="6rem" visible="true" fieldGroupIds="hideShowElements">
                           <Label text="Support" design="Bold" fieldGroupIds="hideShowElements"/>
                           <List fieldGroupIds="hideShowElements"
                              items="{path:'support', templateShareable:false}"
                              includeItemInSelection="true">
                              <CustomListItem class="listItems">
                                <HBox class="listItems">
                                   <Text text="• " class="items_circle2" />
                                   <Link wrapping="true"
                                      text="{support_name}"
                                      target="_blank"
                                      href="{support_url}" />
                                </HBox>
                              </CustomListItem>
                           </List>
                        </VBox>                        
                     </Panel>    
                  </l:Grid>
                  </ScrollContainer>
               </IconTabFilter>
            </items>
         </IconTabBar>
      </Page>
   </App>
</mvc:View>
When I use "False" for stretchcontentheight, this is the top of my page: