Margins and Padding in SAPUI5

In this tutorial blog you learn about Margins and paddings in SAPUI5 applications. SAP has provided some predefined classes that you can make use in the application for margin and padding purposes of your control elements.

Margins and Padding are used for tuning the layout of the sapui5 screens. We can customize the margins of particular controls manually, by adding custom CSS. But we can also take use of predefined SAP provided CSS classes and this is suggested by SAP since these classes take care of consistent sizing steps, left to right support, and responsiveness.

Using these predefined classes; sapui5 provides the option of adding spaces in between the controls by adding a margin. And these margins clear an area around its respective control, outside of its border.

Margins are transparent and are not the part of control’s clickable area, and they collapse with adjacent margins. There are 4 standard sizes available, and they are tiny(8px), small(16px), medium(32px) and large(48px).

And there are 4 types of margins available:

Full Margins

This is used if you want to clear an area all round your control, and this consists of:

sapUiTinyMargins

sapUiSmallMargins

sapUiMediumMargins

sapUiLargeMargins

Single-Sided Margins

This would only clear only one side of the control plus you will have to define which part of the control has to get the margin, for eg top, bottom, begin, end. These are the classes:

sapUiTinyMarginTop sapUiTinyMarginBottom sapUiTinyMarginBegin sapUiTinyMarginEnd

sapUiSmallMarginTop sapUiSmallMarginBottom sapUiSmallMarginBegin sapUiSmallMarginEnd

sapUiMediumMarginTop sapUiMediumMarginBottom sapUiMediumMarginBegin sapUiMediumMarginEnd

sapUiLargeMarginTop sapUiLargeMarginBottom sapUiLargeMarginBegin sapUiLargeMarginEnd

Two-Sided Margins

This would clear spaces on the two sides, either top and bottom or begin or end. And these are the classes provided by sap:

sapUiTinyMarginBeginEnd sapUiTinyMarginTopBottom

sapUiSmallMarginBeginEnd sapUiSmallMarginTopBottom

sapUiMediumMarginBeginEnd sapUiMediumMarginTopBottom

sapUiLargeMarginBeginEnd sapUiLargeMarginTopBottom

Responsive Margins

If the application is to run on different devices like mobiles, tablets, desktop then one must choose responsive margins, as they automatically align to the screen sizes.  sapUiResponsiveMargin class is for responsiveness .

We can also remove margins, with the help of predefined sap class, like for example some of the controls comes with a margin, and then you don’t want to use the margin for a particular reason, then you can remove the margins by the predefined classes. If you don’t want any margin at all, then use  sapUiNoMargin. Otherwise use particular margins, some of them are:

• sapUiNoMarginTop
• sapUiNoMarginBottom
• sapUiNoMarginBegin
• sapUiNoMarginEnd

Example

In this particular scenario, I have a view which consist of a Page, which includes an image, texts, buttons, icontabfilters, input fields. I will implement margin to the sap.m.App and then to the image. This would make you understand the concept of margins and paddings.

I am sharing the portion of code for the UI and I have highlighted the portion of code where I have used the class.

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"

xmlns="sap.m" controllerName="sap.myApp.controller.App" xmlns:html="http://www.w3.org/1999/xhtml">

<App class="sapUiResponsiveMargin"

width="auto">

<pages>

<Page title="Title of the page">

<content>

<IconTabBar id="idIconTabBar"

> 

<items>

<IconTabFilter id="idTab1" text="IconTabFilter1">

<Image

src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688" class="sapUiSmallMargin"/>

<Input value="{Cars>/Car/CarModel}" description="Hello {Cars>/Car/CarModel}"

valueLiveUpdate="true" width="50%" />

<core:Fragment fragmentName="sap.myApp.view.NewFragment" type="XML"/>

<mvc:XMLView viewName="sap.myApp.view.NewView"/>

</IconTabFilter>

Here, I have used the class in sap.m.App, also I have kept the width = “auto” , since if we run the application on different devices, the margin would be adjusted accordingly. For a tablet the margin width would be less automatically and for a mobile device there won’t be any margin at all so as to save space.

Similarly, I have used class="sapUiSmallMargin” for the image, a small margin would be maintained around the image.

Output Before 

 

Output After

The difference in the margins is showed through a red line border.

Hope, you understood the tutorial blog. Do share the feedback in the comment section and if you have any doubts relating to this, mail me at sapui5tutors@gmail.com or just comment down your queries. Happy to help J

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post