We have an app that is structured with an app.view (as an outer shell) -> Main.view (with header, and navigation property) -> various views rendered inside. Our problem is that we cannot scroll vertically on any of our pages.
We have tried using the property "fitcontainer" on the top-level VBoxes to no avail.
Did notice something in the inspector, but I don't know if it's relevant:
I can only assume that our scrolling issue is due the way we have structured the app.
App.view:
<mvc:View controllerName="en.funnyapp.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"> <Shell id="shell" appWidthLimited="false"> <App id="app"> </App> </Shell> </mvc:View>
Main.view:
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tnt="sap.tnt" controllerName="en.funnyapp.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml"> <Page title="Title" showHeader="false"> <tnt:ToolHeader> <Image src="./images/bdknavtoplogo.gif" height="47px"></Image> <ToolbarSpacer/> <Button text="FORSIDE" type="Transparent" press="onNavigate"> <customData> <core:CustomData value="Home"/> </customData> </Button> <Button text="SERVICEREGISTRERING" type="Transparent" press="onNavigate"> <customData> <core:CustomData value="ServiceRegistration"/> </customData> </Button> <Button text="VEDLIGHOLDELSE" type="Transparent" press="onNavigate"> <customData> <core:CustomData value="Maintenance"/> </customData> </Button> <Button text="RAPPORTERING" type="Transparent" press="onNavigate"> <customData> <core:CustomData value="Reporting"/> </customData> </Button> <Button text="LOG UD" type="Transparent"></Button> </tnt:ToolHeader> <content> <NavContainer id="mainContent"/> </content> </Page> </mvc:View>
Randomly picked view:
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:grid="sap.ui.layout.cssgrid" controllerName="en.funnyapp.controller.Maintenance" xmlns:html="http://www.w3.org/1999/xhtml"> <VBox class="sapUiMediumMargin"> <Title text="Søg efter VH-ordre" titleStyle="H2" class="sapUiTinyMarginBottom"/> <HBox class="sapUiMediumMarginBottom"> <SearchField placeholder="Hvad søger du"/> <Button text="Vis" class="sapUiTinyMarginBeginEnd"/> <Button text="Ændre"/> </HBox> <Title text="Aktiv forespørgsel" titleStyle="H4"/> <grid:CSSGrid id="grid1" gridTemplateRows="25px 25px 25px 25px" gridTemplateColumns="repeat(6,210px)" gridGap=".1rem" class="sapUiLargeMarginBottom"> <grid:items> <VBox> <Title text="Ordre - Fejl" wrapping="true" class="sapUiSmallMarginTop"/> </VBox> <VBox> <RadioButton text="Nye de seneste 7 dage(0)"/> </VBox> <VBox> <RadioButton text="Alle nye(3)"/> </VBox> <VBox> <RadioButton text="Under behandling(5)"/> </VBox> <VBox> <RadioButton text="Afsluttet(4)"/> </VBox> <VBox></VBox> <VBox> <Title text="Ordre - Norm" wrapping="true" class="sapUiSmallMarginTop"/> </VBox> <VBox> <RadioButton text="Nye(1)"/> </VBox> <VBox> <RadioButton text="Accepteret(2)"/> </VBox> <VBox> <RadioButton text="Afventer(0)"/> </VBox> <VBox> <RadioButton text="Afvist(0)"/> </VBox> <VBox> <RadioButton text="Teknisk afsluttet(1)"/> </VBox> <VBox> <Title text="Ordre - Tilstand" wrapping="true" class="sapUiSmallMarginTop"/> </VBox> <VBox> <RadioButton text="Nye(2)"/> </VBox> <VBox> <RadioButton text="Accepteret(1)"/> </VBox> <VBox> <RadioButton text="Afventer(0)"/> </VBox> <VBox> <RadioButton text="Afvist(0)"/> </VBox> <VBox> <RadioButton text="Teknisk afsluttet(1)"/> </VBox> <VBox> <Title text="Meddelelser - Tilstand" wrapping="true" class="sapUiSmallMarginTop"/> </VBox> <VBox> <RadioButton text="Kladde(3)"/> </VBox> <VBox> <RadioButton text="Sendt til Banedanmark(5)"/> </VBox> <VBox></VBox> <VBox></VBox> <VBox></VBox> </grid:items> </grid:CSSGrid> <Toolbar style="Clear"> <Title text="Ordre - Fejl - Nye de seneste 7 dage(0)" titleStyle="H4"/> <ToolbarSpacer/> <SearchField placeholder="Søg" width="15rem"/> <Button text="Eksporter til excel" class="sapUiTinyMarginEnd"/> <Button text="Print"/> </Toolbar> <Table items="{mockData>/vhList}" itemPress="onItemPress"> <columns> <Column> <Label text="Col1"/> </Column> <Column> <Label text="Col2"/> </Column> <Column> <Label text="Col3"/> </Column> <Column> <Label text="Col4"/> </Column> </columns> <items> <ColumnListItem type="Navigation"> <cells> <Text text="{mockData>col1}"/> <Text text="{mockData>col2}"/> <Text text="{mockData>col3}"/> <Text text="{mockData>col4}"/> </cells> </ColumnListItem> </items> </Table> </VBox> </mvc:View>
Screenshot of the view zoom 100%:
Same view zoomed way out:
Any ideas/input is highly appreciated. Thanks.