Official Content

What are padding, border and margin? They are control properties. Padding and Margin allow us to manage spaces between controls, and Border is used to draw a border around the control and indicate its size, color, etc. The image below shows how these properties are displayed at runtime:

PaddingBorderMargin

In GeneXus, they are set in the classes of the SD theme used in the application. Their values are expressed in DIPs (Device Independent Pixel) and they can be applied to the following controls and/or classes:

Class / Property Border Margin Padding
Table x x x
Attribute x x No
Grid x x x
GridRow x x x
Button x x x
Tab x x x
TextBlock x x No

Example

Let’s see how to apply these properties in a 'Table' control in an object of "panel for SD" type. It is assigned the Table Class of the theme with the following properties:

Border Margin and Padding class sample

The result at runtime is as follows:

Android
Android Margin Border and Padding Sample
iPhone
iPhone Margin Border and Padding Sample

Notes

When setting these properties, certain considerations must be taken into account. Otherwise, it may happen that controls are not “drawn” as expected when executing it. They may also be cut or shown in a different place.

Let’s see an example of a BAD design to better understand the problem of incorrectly setting these properties in GeneXus.

Let’s suppose that we have a ‘table’ with rows style = 64 dips, and that we set margin, border and padding values for it. In all, they exceed 64 dips. For example, we create a class where MarginTOP and BOTTOM=20, BORDER= 10 and PADDING=10. Therefore, if we add only borders and spaces we have 20+10+10 on top + 20+10+10 at the bottom. It’s a total of 80 dips taken by these properties, when the row has only 64dips.

What happens when it is executed?

In this case, ‘Hello World’ is NOT displayed in the expected place:

Android
Android Margin Border and Padding Wrong Sample
iPhone
iPhone Margin Border and Padding Wrong Sample



Last update: November 2023 | © GeneXus. All rights reserved. GeneXus Powered by Globant