Enabling Responsive Paddings According to the Control Width
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 |
|
|
|
|
|
|---|---|---|---|---|---|
|
(
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
<Page class="sapUiResponsivePadding--header sapUiResponsivePadding--subHeader sapUiResponsivePadding--content sapUiResponsivePadding--footer sapUiResponsivePadding--floatingFooter">
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"}
});
- 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.