diff --git a/docs/03_Get-Started/step-36-content-density-d935dbf.md b/docs/03_Get-Started/step-36-content-density-d935dbf.md index 82b3a6d..8497dce 100644 --- a/docs/03_Get-Started/step-36-content-density-d935dbf.md +++ b/docs/03_Get-Started/step-36-content-density-d935dbf.md @@ -29,7 +29,13 @@ You can view and download all files at [Walkthrough - Step 36](https://ui5.sap.c ... getContentDensityClass() { - return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact"; + // if the Fiori Launchpad has already set the content density class according to its logic, don't override it + const classList = document.body.classList; + if (classList.contains("sapUiSizeCozy") || classList.contains("sapUiSizeCompact")) { + return ""; + } + // if the application runs standalone, use cozy on touch devices + return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact"; } }); }); @@ -37,7 +43,7 @@ You can view and download all files at [Walkthrough - Step 36](https://ui5.sap.c To prepare the content density feature we will also add a helper method `getContentDensityClass`. SAPUI5 controls can be displayed in multiple sizes, for example in a `compact` size that is optimized for desktop and non-touch devices, and in a `cozy` mode that is optimized for touch interaction. The controls look for a specific CSS class in the HTML structure of the application to adjust their size. -This helper method queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class. +This helper method checks if the content density is already set by the shell. If not, it queries the `Device` API directly for touch support of the client and returns the CSS class `sapUiSizeCompact` if touch interaction is not supported and `sapUiSizeCozy` for all other cases. We will use it throughout the application coding to set the proper content density CSS class.