enabling-responsive-paddings-according-to-the-control-width-3b718b5.md

Enabling Responsive Paddings According to the Control Width

Apply responsive paddings over separate parts of the controls.

Note:

You can enable the responsive paddings based on the width of the control only for the SAP Horizon and Quartz themes.

Usage

Application developers can now apply responsive paddings over separate parts of the controls and align the space distribution properly, according to the width of the control (and not the whole screen). This can be done by using a set of classes, which are available for the different controls.

Applied Paddings

Based on the container's size, one of the following classes is added, and the corresponding padding-left and padding-right are applied:

Container Size (pixels)	Class	Padding-Left and Padding-Right Applied
<= 600	sapUi-Std-PaddingS	1rem
>600	sapUi-Std-PaddingM	2rem
>1024	sapUi-Std-PaddingL	2rem
>=1440	sapUi-Std-PaddingXL	3rem

Supported Controls

The following table shows the controls that support responsive paddings. To enable this concept and to add responsive paddings to an element of the controls, add the corresponding classes to the controls, depending on your use case:

Supported Controls	sapUiResponsivePadding--header	sapUiResponsivePadding--subHeader	sapUiResponsivePadding--content	sapUiResponsivePadding--footer	sapUiResponsivePadding--floatingFooter
sap.m.Dialog (sap.m.MessageBox, sap.m.SelectDialog, sap.m.TableSelectDialog)
sap.m.IconTabBar
sap.m.ObjectHeader
sap.m.Page
sap.m.Popover
sap.m.TabContainer
sap.m.Wizard

Note:

If nessecary, you can further align controls by using the available set of predefined CSS margin classes. For example, you can add negative margins to an element on its left and right sides. For more information, see Using Predefined CSS Margin Classes.

Example

<Page class="sapUiResponsivePadding--header sapUiResponsivePadding--subHeader sapUiResponsivePadding--content sapUiResponsivePadding--footer sapUiResponsivePadding--floatingFooter">

For a detailed example, see the Samples for sap.m.Page.

How to Enable Responsive Paddings

As a control developer, you can enable application developers to apply responsive paddings, by implementing the sap.ui.core.util.ResponsivePaddingsEnablement utility.

Here is an example:

ResponsivePaddingsEnablement.call(MyCustomControl.prototype, {
					header: {suffix: "-myCustomControlHeader"},
					content: {selector: ".myCustomControlContent"}
					});
				

As the example demonstrates, there are two ways to select an element:

• Using suffix: This enables you to select an element by its ID.
• Using selector: This covers all possible CSS selections.

To call the utility, when initializing the control, use:

MyCustomControl._initResponsivePaddingsEnablement()

As a result, application developers will be able to use classes, such as sapUiResponsivePadding--header and sapUiResponsivePadding--content, to enable the paddings on the respective element.