Skip to content

Latest commit

 

History

History
157 lines (89 loc) · 5.22 KB

Content_Densities_e54f729.md

File metadata and controls

157 lines (89 loc) · 5.22 KB
loio
e54f729da8e3405fae5e4fe8ae7784c1

view on: demo kit nightly build | demo kit latest release

Content Densities

The devices used to run apps that are developed with OpenUI5 run on various different operating systems and have very different screen sizes. OpenUI5 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.

Available Content Densities

The table below shows the content densities that are available for the Quartz Light, Belize, Blue Crystal, and high-contrast 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.

For some controls, this is the default density.

Condensed

sapUiSizeCondensed

Size even further reduced compared to Compact (in particular, row heights smaller).

This density can be used for all tables of the sap.ui.table library.

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 (such as Smartphones)

Compact Density: Mainly for Mouse-Operated Devices (such as Desktops)

Checking Which Content Densities Are Supported for a Control

If you need to know which content densities are supported for a particular control, the best place to look is the Samples section in the Demo Kit. 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 Samples in the Demo Kit 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:

Setting Densities

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. For a standalone scenario, we recommend that you set this 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.

Thus, when using densities, you cannot mix them: You must not combine Cozy and Compact or Cozy and Condensed within the same hierarchy.

You can use densities in the following way:

  • Cozy

    Make sure you always only use the Cozy density within a hierarchy.

  • Compact

    Make sure you always only use the Compact density within a hierarchy.

  • Condensed

    Condensed is a special case and can only be used in combination with the Compact density.

    Also, keep in mind that the Condensed density has an effect on controls in the sap.ui.table library and their content only. If the density is set for controls outside of these tables, it will not have any effect on them.

  • How to Use Densities for Controls
    How content densities are set and how they can be used in the SAP Fiori launchpad is explained and shown in the following code samples (using the Compact density as an example).