You are here: Label > containerWeight

Label - Layout Properties

The layout properties for Label widget are as follows:

containerWeight

Specifies the percentage of the parent width that should allocated to the widget. The parent widget space is distributed to its child widgets based on this weight factor. All its child widgets should sum up to 100% of width except when placed in kony.ui.ScrollBox.

Syntax

JavaScript: containerWeight

Type

JavaScript: Number (less than or equal to 100)

Read / Write

Yes - (Read and Write)

JavaScript Example

//Defining the properties for a label with containerWeight:50.
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={containerWeight:50, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP); //Reading the containerWeight of the label alert("Label containerWeight::"+lbl.containerWeight);

Accessible from IDE

No

Platform Availability

Available on all platforms

contentAlignment

Specifies the alignment of the text on the Label with respect to its boundaries. A default value CONTENT_ALIGN_MIDDLE_LEFT is assigned for all platforms. To choose another alignment, click the drop-down arrow and select the desired alignment. However, to change the default value on a particular platform, select the button next to the drop-down and select respective platform and choose the value.

Default: CONTENT_ALIGN_MIDDLE_LEFT

The following are the available options:

Syntax

JavaScript: contentAlignment

Type

JavaScript: Number

Read / Write

Yes - (Read and Write)

JavaScript Example

//Defining the properties for a label with contentAlignment:constants.CONTENT _ALIGN_BOTTOM_LEFT.
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={contentAlignment:constants.CONTENT_ALIGN_BOTTOM_LEFT, containerWeight:100, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

Available on all platforms

hExpand

Specifies if the widget should occupy all the width available to it.

Note: Mobile Web does not support the Expand property. This is because a widget in a Mobile Web cannot expand or contract based on the neighboring widget (default behavior of a widget in a Mobile Web).

Note: In BlackBerry 10 platform, hExpand as false is not supported.

Default: true

If set to false, the widget occupies the preferred width. The preferred width of a widget is the sum of its contents width, padding and margin.

If set to true, the widget ensures that the entire width available to it is occupied.

Widget when the Expand horizontal is set to true

Syntax

JavaScript: hExpand

Type

JavaScript: Boolean

Read / Write

No

JavaScript Example

//Defining the properties for a label with hExpand:true.
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={containerWeight:100, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

Available on all platforms except Server side Mobile Web, Desktop Web, and SPA

margin

Defines the space around a widget. You can use this option to define the left, top, right, and bottom distance between the widget and the next widget or the container.

To define the margin values for a platform, click the Ellipsis () button against the property to open the Margin screen. Select the checkbox against the platform for which you want to define the margins and enter the top, left, right, and bottom margin values.

If you want to use the margin values set for a platform across other platforms, you can click the Apply To button and select the platforms on which you want the margin values to be applied.

The following image illustrates the window to define the margins for platforms:

The following image illustrates a widget with a defined margin:

Syntax

JavaScript: margin

Type

JavaScript: Array of Numbers

Read / Write

Yes - (Read and Write)

JavaScript Example

//Defining properties for a label with margin:[5,5,5,5].
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={containerWeight:100, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

Available on all platforms except Server side Mobile Web (basic)

marginInPixel

Enables you to define the space around a widget in pixels or in percentage. You can use this option to define the top, left, right, and bottom distance between the widget and the next element.

Default: false

If set to true, the margin is applied in pixels.

If set to false, the margin is applied as set in margin property.

Syntax

JavaScript: marginInPixel

Type

JavaScript: Boolean

Read / Write

No

JavaScript Example

//Defining properties for a label with margin in pixels.
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={containerWeight:100, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false, marginInPixel: true};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

padding

Defines the space between the content of the widget and the widget boundaries. You can use this option to define the top, left, right, and bottom distance between the widget content and the widget boundary.

To define the padding values for a platform, click the Ellipsis () button against the property to open the Padding screen. Select the checkbox against the platform for which you want to define the padding's and enter the top, left, right, and bottom padding values.

If you want to use the padding values set for a platform across other platforms, you can click the Apply To button and select the platforms on which you want the padding values to be applied.

Note: If no skin is applied to a Button, then Padding is not supported on iPhone. This is due to iOS Safari browser limitation. If you want the padding to be applied, apply a skin to the button and then apply padding.

Note: On iOS platform, padding is not respected when no text is provided to Label widget.

The following image illustrates the window to define the padding's for platforms:



The following image illustrates a widget with a defined padding:

Syntax

JavaScript: padding

Type

JavaScript: Array of Numbers

Read / Write

Yes - (Read and Write)

JavaScript Example

//Defining properties for a label with padding:[5,5,5,5].
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={containerWeight:100, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false};
var lblPSP ={};

//Creating the label.
var label1 = new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

Available on all platforms except Server side Mobile Web (basic)

paddingInPixel

Enables you to define the space between the content of the widget and the widget boundaries in pixels or in percentage. You can use this option to define the top, left, right, and bottom distance between the widget content and the widget boundary.

Default: false

If set to true, the padding is applied in pixels.

If set to false, the padding is applied as set in padding property.

Note: This property can be set to true or false only for iPhone, iPad, Android and Windows Phone. On other platforms this property does not give any results even when set to true.

Note: For backward compatibility on older projects, this property will be made true for iPhone, iPad, Android and Windows Phone it will be false.

Syntax

JavaScript: paddingInPixel

Type

JavaScript: Boolean

Read / Write

No

JavaScript Example

//Defining properties for a label with padding in pixels.
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={containerWeight:100, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false, paddingInPixel: true};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

vExpand

Specifies if the widget has to occupy all the vertical space available to it.

Note: Mobile Web does not support the Expand property. This is because a widget in a Mobile Web cannot expand or contract based on the neighboring widget (default behavior of a widget in a Mobile Web).

Default: false

If set to false, the widget occupies the preferred height. The preferred height of a widget is the sum of its contents height, padding and margin.

If set to true, the widget ensures that the entire height available to it is occupied.

Widget when the Expand vertical is set to true

Syntax

JavaScript: vExpand

Type

JavaScript: Boolean

Read / Write

No

JavaScript Example

//Defining properties for a label with vExpand:false.
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={containerWeight:100,padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

Available on all platforms except Server side Mobile Web and Desktop Web platforms

widgetAlignment

Indicates how a widget is to be anchored with respect to its parent. Each of these below options have a horizontal alignment attribute and a vertical alignment attribute. For example, WIDGET_ALIGN_TOP_LEFT specifies the vertical alignment as TOP and horizontal alignment as LEFT.

Horizontal alignment attributes are only applicable if hExpand is false. Similarly vertical alignment attributes are only applicable if vExpand is false.

Default: WIDGET_ALIGN_CENTER

The widget alignment can be controlled by the below options.

Syntax

JavaScript: widgetAlignment

Type

JavaScript: Number

Read / Write

No

JavaScript Example

//Defining properties for a label with widgetAlignment:constants.WIDGET_ALIGN_TOP_LEFT
var lblBasic = {id:"label1", skin:"lblSkn", text:"Hello world", isVisible:true};
var lblLayout ={widgetAlignment:constants.WIDGET_ALIGN_TOP_LEFT, containerWeight:100, padding:[5,5,5,5], margin:[5,5,5,5], hExpand:true, vExpand:false};
var lblPSP ={};

//Creating the label.
var label1= new kony.ui.Label(lblBasic, lblLayout, lblPSP);

Accessible from IDE

Yes

Platform Availability

Available on all platforms

Copyright © 2012 Kony, Inc. All rights reserved