The Compact density is a reduced-size design which is available for sap.m controls used in the Blue Crystal and High Contrast Black (HCB) theme.
The font size is the same, but the dimensions of controls and the spacing between them are reduced compared to the sap.m controls.
The Compact density feature is not supported for Internet Explorer 9.
The default design for all controls belonging to the sap.m library is the Cozy density (larger dimensions and spacings). If your application only uses the sap.m library, you can skip setting a CSS class if the Cozy density is exactly what you require. However, controls belonging to other libraries may also support a cozy design (e.g. sap.ui.table.Table) but the default might be different (such as Compact density). For this reason, if your application combines controls belonging to different libraries, we strongly recommend that you set the CSS class sapUiSizeCozy if you want to use Cozy density (and similarly, to set CSS class sapUiSizeCompact for selecting Compact density).
The Compact density is triggered by the CSS class sapUiSizeCompact set on a parent element of the UI region for which you want to use compact density controls. This means that some parts of the UI or different apps inside a sap.m.Shell can use the standard density of the sap.m controls, while other parts can use the compact density at the same time. However, sub-parts of the UI part that is set to compact density cannot use the normal density because the CSS class affects the entire HTML subtree.
As dialogs and other popups are located at the root of the HTML document, you also have to set the CSS class for those elements to the respective density. The CSS class only affects child controls. You cannot make a control itself compact by adding the CSS class to it. Instead, set the CSS class on the parent container, for example a view or a component.
XML view definition - Example:
#!xml <mvc:View class="sapUiSizeCompact" xmlns=....> ... </mvc:View>
JS view definition - Example:
#!js
createContent: function(oController) {
...
this.addStyleClass("sapUiSizeCompact"); // make everything inside this View appear in Compact density
...
}
JavaScript opening a dialog - Example:
#!js
var myDialog = new sap.ui.commons.Dialog({.....}).addStyleClass("sapUiSizeCompact");
myDialog.open();
JavaScript instantiating a view - Example:
#!js
var myView = sap.ui.view(...);
myView.addStyleClass("sapUiSizeCompact");
It is also possible to apply the compact density only under certain circumstances, for example, for devices that do not support touch interaction. In this case, add the class dynamically to the UI instead of statically. You can do this, for example, in the view controller:
#!js
sap.ui.controller("my.controller", {
onInit: function() {
// apply compact density if touch is not supported, the standard cozy design otherwise
this.getView().addStyleClass(sap.ui.Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact");
}
});
As the check depends on several factors, you may not want to repeat the same logic again and again. A dialog opened from a compact view should, for example, also be in compact density.
As dialogs are rendered in a different part of the HTML tree, they do not automatically inherit the compact density. To decide if you set the compact density for a dialog, either perform the same check as for the view or use the convenience function jQuery.sap.syncStyleClass. This convenience function synchronizes a style class between elements. The function accepts the following parameters: Name of the style class, source element, and destination element. The following code snippet shows an example:
#!xml
<mvc:View
controllerName="mycontroller"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Button text="Show Dialog" press="onOpenDialog" />
</mvc:View>#!xml
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="Alert" type="Message">
<Text text="Lorem ipsum dolor sit amet" />
<beginButton>
<Button text="Close" press="onDialogClose" />
</beginButton>
</Dialog>
</core:FragmentDefinition>#!js
sap.ui.controller("mycontroller", {
onOpenDialog: function (oEvent) {
if (! this._oDialog) {
this._oDialog = sap.ui.xmlfragment("mydialog", this);
this.getView().addDependent(this._oDialog);
}
// sync compact style
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
this._oDialog.open();
}
});
When calling jQuery.sap.syncStyleClass, the source element can be a jQuery object, a OpenUI5 control, or the ID of an HTML element. The destination object can either be a jQuery object or a OpenUI5 control.
To determine if the compact style class is set anywhere above a certain HTML element, you can use the closest function from jQuery as shown in the following example:
#!js
var btn = new sap.m.Button({
text: "Hello World",
press: function(){
var dialog = new sap.m.Dialog({
title: "Hello World",
content: new sap.m.Button({text:"Test Me"})
});
// add the 'sapUiSizeCompact' class if the Button is in an area using Compact density
if (this.$().closest(".sapUiSizeCompact").length > 0) { // "this" in the event handler is the control that triggered the event
dialog.addStyleClass("sapUiSizeCompact");
}
dialog.open();
}
});If you want to apply the normal and compact density to your own controls, provide the normal CSS styling for the normal density regardless of any size density classes and provide extra CSS to shrink the size, if an ancestor element has the sapUiSizeCompact class. The following code snippet shows you an example:
#!css
.myOwnControl { /* the standard (big) style */
...
height: 3rem;
...
}
.sapUiSizeCompact .myOwnControl { /* reduce the height in compact density */
height: 2rem;
}