Show TOC

Content DensitiesLocate this document in the navigation structure

The devices used to run apps that are developed with SAPUI5 run on various different operating systems and have very different screen sizes. SAPUI5 contains different content densities for certain controls that allow your app to adapt to the device in question, allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse.

You set the corresponding content density CSS class on the container for the part that you need to switch to the content density in question, not on the control itself. This is usually done within the administration settings of the SAP Fiori launchpad, but for a standalone scenario we recommend that you set it at a high level, such as <body>, as in most cases you will want to set it for the whole app.
Note

Be aware that you can only set one density within a hierarchy: once you have set a CSS class at a high level such as the one described above, it cascades all the way down, meaning you cannot revoke or overwrite it in the lower levels of your coding.

Available Content Densities

The table below shows the content densities that are available for the Belize, Blue Crystal, and High-Contrast Black (HCB) themes:

Content Density

CSS Class

Explanation

Cozy

sapUiSizeCozy

'Large' design: Dimensions of the controls are optimized for touch-enabled devices, such as smartphones, to allow users to interact with controls more easily.

This is the default density for most controls, particularly those in the sap.m library.

Compact

sapUiSizeCompact

Reduced-size design: The font size is the same as for the cozy density, but the dimensions of the controls and the spacing between them are reduced. This density is more suitable for mouse-operated devices, such as desktops.

Condensed

sapUiSizeCondensed

Specific design that is used for sap.ui.table.AnalyticalTable.

The following two screenshots show the difference between the Cozy and Compact densities, using a simple sap.ui.table.Table example:

Cozy Density: Mainly for Touch Devices (e.g. Smartphones)

Compact Density: Mainly for Mouse-Operated Devices (e.g. Desktops)

Checking Which Content Densities Are Supported for a Control

After choosing a control from the list, look at the details in the Object Header area to see which density is supported. In the example shown below, the control supports both the Compact and Cozy content densities:

Alternatively, you can also use the filter function in the Explored application to filter the controls according to their content densities. Simply choose the filter selection icon in the upper left corner of the screen and then select Content Density, as shown below: