FlexBox

extends Control

known direct subclasses: HBox, VBox

The sap.m.FlexBox control builds the container for a flexible box layout.

Browser support: This control is not supported in Internet Explorer 9!

Constructor Summary

new sap.m.FlexBox(sId?, mSettings?)Constructor for a new sap.m.FlexBox.

Events borrowed from class sap.ui.core.Control

validateFieldGroup

Events borrowed from class sap.ui.base.ManagedObject

formatError, modelContextChange, parseError, validationError, validationSuccess

Method Summary

sap.m.FlexBox.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.m.FlexBox with name sClassName and enriches it with the information contained in oClassInfo.

sap.m.FlexBox.getMetadata()Returns a metadata object for class sap.m.FlexBox.

addItem(oItem)Adds some item to the aggregation items.

destroyItems()Destroys all the items in the aggregation items.

getAccessibilityInfo()

getAlignContent()Gets current value of property alignContent.

getAlignItems()Gets current value of property alignItems.

getBackgroundDesign()Gets current value of property backgroundDesign.

getDirection()Gets current value of property direction.

getDisplayInline()Gets current value of property displayInline.

getFitContainer()Gets current value of property fitContainer.

getHeight()Gets current value of property height.

getItems()Gets content of aggregation items.

getJustifyContent()Gets current value of property justifyContent.

getRenderType()Gets current value of property renderType.

getWidth()Gets current value of property width.

getWrap()Gets current value of property wrap.

indexOfItem(oItem)Checks for the provided sap.ui.core.Control in the aggregation items.

insertItem(oItem, iIndex)Inserts a item into the aggregation items.

removeAllItems()Removes all the controls from the aggregation items.

removeItem(vItem)Removes a item from the aggregation items.

setAlignContent(sAlignContent)Sets a new value for property alignContent.

setAlignItems(sAlignItems)Sets a new value for property alignItems.

setBackgroundDesign(sBackgroundDesign)Sets a new value for property backgroundDesign.

setDirection(sDirection)Sets a new value for property direction.

setDisplayInline(bDisplayInline)Sets a new value for property displayInline.

setFitContainer(bFitContainer)Sets a new value for property fitContainer.

setHeight(sHeight)Sets a new value for property height.

setJustifyContent(sJustifyContent)Sets a new value for property justifyContent.

setRenderType(sRenderType)Sets a new value for property renderType.

setWidth(sWidth)Sets a new value for property width.

setWrap(sWrap)Sets a new value for property wrap.

Methods borrowed from class sap.ui.core.Control

Methods borrowed from class sap.ui.core.Element

Methods borrowed from class sap.ui.base.ManagedObject

addAggregation, addAssociation, applySettings, attachFormatError, attachModelContextChange, attachParseError, attachValidationError, attachValidationSuccess, bindAggregation, bindContext, bindObject, bindProperty, destroyAggregation, detachFormatError, detachModelContextChange, detachParseError, detachValidationError, detachValidationSuccess, findAggregatedObjects, fireFormatError, fireModelContextChange, fireParseError, fireValidationError, fireValidationSuccess, getAggregation, getAssociation, getBinding, getBindingContext, getBindingInfo, getBindingPath, getEventingParent, getId, getModel, getObjectBinding, getOriginInfo, getParent, getProperty, hasModel, indexOfAggregation, insertAggregation, isBound, isInvalidateSuppressed, isTreeBinding, propagateMessages, removeAggregation, removeAllAggregation, removeAllAssociation, removeAssociation, setAggregation, setAssociation, setBindingContext, setModel, setProperty, unbindAggregation, unbindContext, unbindObject, unbindProperty, validateAggregation, validateProperty

Methods borrowed from class sap.ui.base.EventProvider

attachEvent, attachEventOnce, detachEvent, hasListeners

Constructor Detail

new sap.m.FlexBox(sId?, mSettings?)

Constructor for a new sap.m.FlexBox.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

Properties
- height : sap.ui.core.CSSSize (default: )
- width : sap.ui.core.CSSSize (default: )
- displayInline : boolean (default: false)
- direction : sap.m.FlexDirection (default: Row)
- fitContainer : boolean (default: false)
- renderType : sap.m.FlexRendertype (default: Div)
- justifyContent : sap.m.FlexJustifyContent (default: Start)
- alignItems : sap.m.FlexAlignItems (default: Stretch)
- wrap : sap.m.FlexWrap (default: NoWrap)
- alignContent : sap.m.FlexAlignContent (default: Stretch)
- backgroundDesign : sap.m.BackgroundDesign (default: Transparent)
Aggregations
- items : sap.ui.core.Control[] (default)

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:

{string}	sId?	id for the new control, generated automatically if no id is given
{object}	mSettings?	initial settings for the new control

Method Detail

sap.m.FlexBox.extend(sClassName, oClassInfo?, FNMetaImpl?): function

Creates a new subclass of class sap.m.FlexBox with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Parameters:

{string}	sClassName	Name of the class being created
{object}	oClassInfo?	Object literal with information about the class
{function}	FNMetaImpl?	Constructor function for the metadata object; if not given, it defaults to `sap.ui.core.ElementMetadata`

Returns:

{function}

Created class / constructor function

sap.m.FlexBox.getMetadata(): sap.ui.base.Metadata

Returns a metadata object for class sap.m.FlexBox.

Returns:

{sap.ui.base.Metadata}

Metadata object describing this class

addItem(oItem): sap.m.FlexBox

Adds some item to the aggregation items.

Parameters:

{sap.ui.core.Control}

oItem

the item to add; if empty, nothing is inserted

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

destroyItems(): sap.m.FlexBox

Destroys all the items in the aggregation items.

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

getAccessibilityInfo()

See:

{sap.ui.core.Control#getAccessibilityInfo}

getAlignContent(): sap.m.FlexAlignContent

Gets current value of property alignContent.

Determines the layout behavior of container lines when there's extra space along the cross-axis. This property has no effect in Internet Explorer 10.

Default value is Stretch.

Since:: 1.36.0

Returns:

{sap.m.FlexAlignContent} Value of property alignContent

getAlignItems(): sap.m.FlexAlignItems

Gets current value of property alignItems.

Determines the layout behavior of items along the cross-axis. "Baseline" is not supported in Internet Explorer 10.

Default value is Stretch.

Returns:

{sap.m.FlexAlignItems} Value of property alignItems

getBackgroundDesign(): sap.m.BackgroundDesign

Gets current value of property backgroundDesign.

Defines the background style of the sap.m.FlexBox.

Default value is Transparent.

Since:: 1.38.5

Returns:

{sap.m.BackgroundDesign} Value of property backgroundDesign

getDirection(): sap.m.FlexDirection

Gets current value of property direction.

Determines the direction of the layout of child elements.

Default value is Row.

Returns:

{sap.m.FlexDirection} Value of property direction

getDisplayInline(): boolean

Gets current value of property displayInline.

Determines whether the sap.m.FlexBox is in block or inline mode.

Default value is false.

Returns:

{boolean} Value of property displayInline

getFitContainer(): boolean

Gets current value of property fitContainer.

Determines whether the sap.m.FlexBox will be sized to completely fill its container. If the sap.m.FlexBox is inserted into a Page, the property 'enableScrolling' of the Page needs to be set to 'false' for the FlexBox to fit the entire viewport.

Default value is false.

Returns:

{boolean} Value of property fitContainer

getHeight(): sap.ui.core.CSSSize

Gets current value of property height.

The height of the sap.m.FlexBox. Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

Default value is .

Since:: 1.9.1

Returns:

{sap.ui.core.CSSSize} Value of property height

getItems(): sap.ui.core.Control[]

Gets content of aggregation items.

Flex items within the flexible box layout

Returns:

{sap.ui.core.Control[]}

getJustifyContent(): sap.m.FlexJustifyContent

Gets current value of property justifyContent.

Determines the layout behavior along the main axis.

Default value is Start.

Returns:

{sap.m.FlexJustifyContent} Value of property justifyContent

getRenderType(): sap.m.FlexRendertype

Gets current value of property renderType.

Determines whether the layout is rendered as a series of divs or as an unordered list (ul)

Default value is Div.

Returns:

{sap.m.FlexRendertype} Value of property renderType

getWidth(): sap.ui.core.CSSSize

Gets current value of property width.

The width of the sap.m.FlexBox. Note that when a percentage is given, for the width to work as expected, the width of the surrounding container must be defined.

Default value is .

Since:: 1.9.1

Returns:

{sap.ui.core.CSSSize} Value of property width

getWrap(): sap.m.FlexWrap

Gets current value of property wrap.

Determines the wrapping behavior of the flex container. This property has no effect in older browsers, e.g. Android Native 4.3 and below.

Default value is NoWrap.

Since:: 1.36.0

Returns:

{sap.m.FlexWrap} Value of property wrap

indexOfItem(oItem): int

Checks for the provided sap.ui.core.Control in the aggregation items. and returns its index if found or -1 otherwise.

Parameters:

{sap.ui.core.Control}

oItem

The item whose index is looked for

Returns:

{int}

The index of the provided control in the aggregation if found, or -1 otherwise

insertItem(oItem, iIndex): sap.m.FlexBox

Inserts a item into the aggregation items.

Parameters:

{sap.ui.core.Control}	oItem	the item to insert; if empty, nothing is inserted
{int}	iIndex	the `0`-based index the item should be inserted at; for a negative value of `iIndex`, the item is inserted at position 0; for a value greater than the current size of the aggregation, the item is inserted at the last position

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

removeAllItems(): sap.ui.core.Control[]

Removes all the controls from the aggregation items.

Additionally, it unregisters them from the hosting UIArea.

Returns:

{sap.ui.core.Control[]}

An array of the removed elements (might be empty)

removeItem(vItem): sap.ui.core.Control

Removes a item from the aggregation items.

Parameters:

{int|string|sap.ui.core.Control}

vItem

The itemto remove or its index or id

Returns:

{sap.ui.core.Control} The removed item or null

setAlignContent(sAlignContent): sap.m.FlexBox

Sets a new value for property alignContent.

Determines the layout behavior of container lines when there's extra space along the cross-axis. This property has no effect in Internet Explorer 10.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Stretch.

Parameters:

{sap.m.FlexAlignContent} sAlignContent New value for property alignContent

Since:: 1.36.0

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setAlignItems(sAlignItems): sap.m.FlexBox

Sets a new value for property alignItems.

Determines the layout behavior of items along the cross-axis. "Baseline" is not supported in Internet Explorer 10.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Stretch.

Parameters:

{sap.m.FlexAlignItems} sAlignItems New value for property alignItems

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setBackgroundDesign(sBackgroundDesign): sap.m.FlexBox

Sets a new value for property backgroundDesign.

Defines the background style of the sap.m.FlexBox.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Transparent.

Parameters:

{sap.m.BackgroundDesign} sBackgroundDesign New value for property backgroundDesign

Since:: 1.38.5

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setDirection(sDirection): sap.m.FlexBox

Sets a new value for property direction.

Determines the direction of the layout of child elements.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Row.

Parameters:

{sap.m.FlexDirection} sDirection New value for property direction

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setDisplayInline(bDisplayInline): sap.m.FlexBox

Sets a new value for property displayInline.

Determines whether the sap.m.FlexBox is in block or inline mode.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Parameters:

{boolean} bDisplayInline New value for property displayInline

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setFitContainer(bFitContainer): sap.m.FlexBox

Sets a new value for property fitContainer.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Parameters:

{boolean} bFitContainer New value for property fitContainer

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setHeight(sHeight): sap.m.FlexBox

Sets a new value for property height.

The height of the sap.m.FlexBox. Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is .

Parameters:

{sap.ui.core.CSSSize} sHeight New value for property height

Since:: 1.9.1

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setJustifyContent(sJustifyContent): sap.m.FlexBox

Sets a new value for property justifyContent.

Determines the layout behavior along the main axis.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Start.

Parameters:

{sap.m.FlexJustifyContent} sJustifyContent New value for property justifyContent

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setRenderType(sRenderType): sap.m.FlexBox

Sets a new value for property renderType.

Determines whether the layout is rendered as a series of divs or as an unordered list (ul)

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Div.

Parameters:

{sap.m.FlexRendertype} sRenderType New value for property renderType

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setWidth(sWidth): sap.m.FlexBox

Sets a new value for property width.

The width of the sap.m.FlexBox. Note that when a percentage is given, for the width to work as expected, the width of the surrounding container must be defined.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is .

Parameters:

{sap.ui.core.CSSSize} sWidth New value for property width

Since:: 1.9.1

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining

setWrap(sWrap): sap.m.FlexBox

Sets a new value for property wrap.

Determines the wrapping behavior of the flex container. This property has no effect in older browsers, e.g. Android Native 4.3 and below.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is NoWrap.

Parameters:

{sap.m.FlexWrap} sWrap New value for property wrap

Since:: 1.36.0

Returns:

{sap.m.FlexBox} Reference to this in order to allow method chaining