Using Container Content Padding CSS Classes

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:

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

<Page class=”sapUiResponsivePadding”>