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
Previous
Next Post »

5 comments

Click here for comments
Unknown
admin
28 August 2016 at 04:10 ×

Useful Documents...!!

Reply
avatar
Jigar
admin
15 October 2016 at 12:27 ×

Superbly Documented & explained. very helpful for beginner

Reply
avatar
RAHUL
admin
20 January 2018 at 09:35 ×

Thank you so much sanjo for the blogs.... very helpful

Reply
avatar
Pankaj verma
admin
5 April 2019 at 13:06 ×

good for noobies :)

Reply
avatar