We have a UI5 app in development that was created in 2015 under v1.30 of UI5.
All was functioning normally with the Fiori Sandbox and the Fiori Client until recently - I can't be certain of a connection, but it coincided with visual updates to Fiori Launchpad styles that were released with v1.34 of UI5. Screenshot attached.
What happens only affects Medium display devices (landscape and portrait tablets). Desktop & mobile are not affected.
Using the code inspector reveals a control named a 'shell-split-canvascntnt', which as expected contains a left and a right pane.
It seems that the new Fiori Launchpad styles have media queries that define the widths of sapUshellViewPortLeft and sapUshellViewPortRight. These are different between landscape and portrait orientations.
Our app is broken, with this rule that pushes the body of the app to the right, leaving a blank space on the left in Landscape mode.
@media screen and (max-aspect-ratio: 13/9)
.sap-tablet.sapUiMedia-Std-Tablet .sapUshellViewPortLeft {
width: 90%;
}
Changing it to 70% fixes landscape, but then breaks portrait mode, and these styles are all coming from library.css anyway.
It's worth noting, I created this app as a fullscreen app based off the worklist template. When I tried the latest version of the worklist template (v1.34), the Fiori Launchpad sandbox for tablets works fine - no layout issues.
I then exported both this new template and our current app and used a comparison tool, but so far have been unable to find the missing link.
It must be something related to a project setting, it's nothing to do with our app code. I tried updating min versions in manifest.json to 1.34, no change. When the app runs without the Fiori context, there are no display issues.
Possibly relevant also, it is a Kapsel app.
Any help is much appreciated! At the moment the only way out of this problem I can see is to re-create the entire project based on updated templates, but I'd like to avoid that, so I'm posting.
-Jason