For many container controls in SAPUI5, such as a Dialog or a Page, you can define
whether the container should have a padding within the content area. A padding clears the
area between the container layout and the controls that are displayed in the content
area.
You can either choose to have no padding, a small padding, or a responsive padding that is
based on the user’s screen size.
The following CSS classes for content padding are provided by SAPUI5:
- sapUiNoContentPadding
- sapUiContentPadding
- sapUiResponsiveContentPadding
The effects of these paddings will be different depending on the container that is being
used:
- If the container is defining a padding on its content area by default, then setting
sapUiNoContentPadding in the application code will remove the
padding and thus not display any space between the container layout and the content
controls.
- If the container is defining no padding on its content by default, then setting
sapUiContentPadding will add 1rem (16px) of padding around
the content area to layout the content controls.
- Setting sapUiResponsiveContentPadding on the container control
will add a padding based on the user’s screen size. On small screen devices such as
smartphones, or when the browser window is resized to a small size, no padding is
displayed. On medium screen sizes and applications that are using a
SplitApp, the control will get 1rem (16px) of padding.
Finally, on large screen sizes in full-screen mode, the container control will get
2rem (32px) of padding to the left and right and 1rem (16px) of padding at the top
and bottom.
The following list shows the controls that support container content padding CSS
classes:
- sap.m.Dialog
- sap.m.IconTabBar
- sap.m.Popover
- sap.m.Page
- sap.m.List
- sap.m.Table
- sap.m.Carousel
- sap.m.Panel
- sap.m.ScrollContainer
- sap.ui.layout.HorizontalLayout
- sap.ui.layout.VerticalLayout
Example
#!xml
<Page class=”sapUiResponsivePadding”>