HBox and VBox in SAPUI5

[former_member377098]

A very common UI controls used in SAPUI5 developments are HBox and VBox.

SAPUI5 layouts are the standard mechanism to align UI controls in web pages. Using these will help to avoid custom CSS and also it will take care of responsiveness of web page.

There are many types of layouts that can be used on demand. HBox and VBox are the two basic and most useful layouts. You can start with these and use other layouts as per requirement.

HBox Layout:

HBox is a horizontal layout control where we can place controls next to each other.

VBox Layout:

VBox is a vertical layout control where we can place control one below the other in vertical manner.

Both HBox and VBox control inherits the property from FlexBox control( sap.m.FlexBox ).

 

Here in the below image, you can see the layout differences in both the UI controls:



 

Some of the properties we use are:

• width : Specifies the width of the layout.
  
  
  
  • Default value : ” “.
  
  
  
  


• height : Specifies the height of the layout.
  
  
  
  • Default value : ” “.
  
  
  
  


• justifyContent : Specifies the direction of the content.


• alignItems : Specifies the content alignment in the layout.


• items : It is important property where we place our content.

Generally these controls are used to align UI controls like labels, text fields, inputs, buttons etc.

Both the control VBox and HBox has their own preset CSS. That's the reason you don't need to add additional css styling as both inherit from FlexBox control.

There is no difference in them in the generated HTML.

The only difference is in the CSS properties for the Controls, for example flex-direction 

One of the UI look and feel issue you can resolve using these controls and its property is:

How to Align Horizontally sap.m.FlexBox Items of Different Height in SAPUI5?

Suppose you have Label and Input field besides each other on the screen, and you see your Label text not exactly in front and center of the input field, then you can try setting the property called alignItems = "Center".

Please refer below snippet for the same:

 



This helped me resolve my issue of aligning UI controls.

Try using these controls for better responsiveness feel of your UI5 applications.

Happy Learning !! 🙂