Class sap.ui.layout.FixFlexModule: sap/ui/layout/FixFlex

extends Control

A layout container with a fixed and a flexible part.

Overview

The FixFlex control builds the container for a layout with a fixed and a flexible part. The flexible container adapts its size to the fix container.

Guidelines:

  • The fix container can hold any number of controls, while the flexible container can hold only one
  • In order for the FixFlex to stretch properly, the parent element, in which the control is placed, needs to have a specified height or needs to have an absolute position.
  • Avoid nesting FixFlex in other flexbox-based layout controls (FixFlex, FlexBox, Hbox, Vbox). Otherwise, contents may be not accessible or multiple scrollbars can appear.

Structure

The behavior of the FixFlex is controlled by the following properties:

  • fixContentSize - The width/height of the fix part of the control
  • fixFirst - The ordering of the fix and flex part
  • minFlexSize - Scrolling inside the flex part, if its contents are large
  • vertical - Alignment of the FixFlex control

Responsive Behavior

  • If the child control of the flex or the fix container has width/height bigger than the container itself, the child control will be cropped in the view.
  • If minFlexSize is set, then a scrollbar is shown in the flexible part, depending on the vertical property.

Since: 1.25.0.
Constructor Summary
new sap.ui.layout.FixFlex(sId?, mSettings?)Constructor for a new FixFlex.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.ui.layout.FixFlex.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.layout.FixFlex with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.layout.FixFlex.getMetadata()Returns a metadata object for class sap.ui.layout.FixFlex.
addFixContent(oFixContent)Adds some fixContent to the aggregation fixContent.
destroyFixContent()Destroys all the fixContent in the aggregation fixContent.
destroyFlexContent()Destroys the flexContent in the aggregation flexContent.
getFixContent()Gets content of aggregation fixContent.
getFixContentSize()Gets current value of property fixContentSize.
getFixFirst()Gets current value of property fixFirst.
getFlexContent()Gets content of aggregation flexContent.
getMinFlexSize()Gets current value of property minFlexSize.
getVertical()Gets current value of property vertical.
indexOfFixContent(oFixContent)Checks for the provided sap.ui.core.Control in the aggregation fixContent.
insertFixContent(oFixContent, iIndex)Inserts a fixContent into the aggregation fixContent.
removeAllFixContent()Removes all the controls from the aggregation fixContent.
removeFixContent(vFixContent)Removes a fixContent from the aggregation fixContent.
setFixContentSize(sFixContentSize)Sets a new value for property fixContentSize.
setFixFirst(bFixFirst)Sets a new value for property fixFirst.
setFlexContent(oFlexContent)Sets the aggregated flexContent.
setMinFlexSize(iMinFlexSize)Sets a new value for property minFlexSize.
setVertical(bVertical)Sets a new value for property vertical.
Constructor Detail
new sap.ui.layout.FixFlex(sId?, mSettings?)

Constructor for a new FixFlex.

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:

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

Parameters:
stringsId?ID for the new control, generated automatically if no ID is given
objectmSettings?Initial settings for the new control
Method Detail
sap.ui.layout.FixFlex.extend(sClassName, oClassInfo?, FNMetaImpl?): function

Creates a new subclass of class sap.ui.layout.FixFlex 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:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.ui.layout.FixFlex.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.layout.FixFlex.
Returns:
sap.ui.base.MetadataMetadata object describing this class
addFixContent(oFixContent): sap.ui.layout.FixFlex
Adds some fixContent to the aggregation fixContent.
Parameters:
sap.ui.core.ControloFixContentthe fixContent to add; if empty, nothing is inserted
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
destroyFixContent(): sap.ui.layout.FixFlex
Destroys all the fixContent in the aggregation fixContent.
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
destroyFlexContent(): sap.ui.layout.FixFlex
Destroys the flexContent in the aggregation flexContent.
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
getFixContent(): sap.ui.core.Control[]

Gets content of aggregation fixContent.

Controls in the fixed part of the layout.

Returns:
sap.ui.core.Control[]
getFixContentSize(): sap.ui.core.CSSSize

Gets current value of property fixContentSize.

Determines the height (if the vertical property is "true") or the width (if the vertical property is "false") of the fixed area. If left at the default value "auto", the fixed-size area will be as large as its content. In this case the content cannot use percentage sizes.

Default value is auto.

Returns:
sap.ui.core.CSSSizeValue of property fixContentSize
getFixFirst(): boolean

Gets current value of property fixFirst.

Determines whether the fixed-size area should be on the beginning/top ( if the value is "true") or end/bottom ( if the value is "false").

Default value is true.

Returns:
booleanValue of property fixFirst
getFlexContent(): sap.ui.core.Control

Gets content of aggregation flexContent.

Control in the stretching part of the layout.

Returns:
sap.ui.core.Control
getMinFlexSize(): int

Gets current value of property minFlexSize.

Enables scrolling inside the flexible part. The given size is calculated in "px". If the child control in the flexible part is larger then the available flexible size on the screen and if the available size for the flexible part is smaller or equal to the minFlexSize value, the scroll will be for the entire FixFlex control.

Default value is 0.

Returns:
intValue of property minFlexSize
Since:
1.29
getVertical(): boolean

Gets current value of property vertical.

Determines the direction of the layout of child elements. True for vertical and false for horizontal layout.

Default value is true.

Returns:
booleanValue of property vertical
indexOfFixContent(oFixContent): int
Checks for the provided sap.ui.core.Control in the aggregation fixContent. and returns its index if found or -1 otherwise.
Parameters:
sap.ui.core.ControloFixContentThe fixContent whose index is looked for
Returns:
intThe index of the provided control in the aggregation if found, or -1 otherwise
insertFixContent(oFixContent, iIndex): sap.ui.layout.FixFlex
Inserts a fixContent into the aggregation fixContent.
Parameters:
sap.ui.core.ControloFixContentthe fixContent to insert; if empty, nothing is inserted
intiIndexthe 0-based index the fixContent should be inserted at; for a negative value of iIndex, the fixContent is inserted at position 0; for a value greater than the current size of the aggregation, the fixContent is inserted at the last position
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
removeAllFixContent(): sap.ui.core.Control[]

Removes all the controls from the aggregation fixContent.

Additionally, it unregisters them from the hosting UIArea.

Returns:
sap.ui.core.Control[]An array of the removed elements (might be empty)
removeFixContent(vFixContent): sap.ui.core.Control
Removes a fixContent from the aggregation fixContent.
Parameters:
int|string|sap.ui.core.ControlvFixContentThe fixContent to remove or its index or id
Returns:
sap.ui.core.ControlThe removed fixContent or null
setFixContentSize(sFixContentSize): sap.ui.layout.FixFlex

Sets a new value for property fixContentSize.

Determines the height (if the vertical property is "true") or the width (if the vertical property is "false") of the fixed area. If left at the default value "auto", the fixed-size area will be as large as its content. In this case the content cannot use percentage sizes.

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

Default value is auto.

Parameters:
sap.ui.core.CSSSizesFixContentSizeNew value for property fixContentSize
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
setFixFirst(bFixFirst): sap.ui.layout.FixFlex

Sets a new value for property fixFirst.

Determines whether the fixed-size area should be on the beginning/top ( if the value is "true") or end/bottom ( if the value is "false").

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

Default value is true.

Parameters:
booleanbFixFirstNew value for property fixFirst
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
setFlexContent(oFlexContent): sap.ui.layout.FixFlex
Sets the aggregated flexContent.
Parameters:
sap.ui.core.ControloFlexContentThe flexContent to set
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
setMinFlexSize(iMinFlexSize): sap.ui.layout.FixFlex

Sets a new value for property minFlexSize.

Enables scrolling inside the flexible part. The given size is calculated in "px". If the child control in the flexible part is larger then the available flexible size on the screen and if the available size for the flexible part is smaller or equal to the minFlexSize value, the scroll will be for the entire FixFlex control.

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

Default value is 0.

Parameters:
intiMinFlexSizeNew value for property minFlexSize
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining
Since:
1.29
setVertical(bVertical): sap.ui.layout.FixFlex

Sets a new value for property vertical.

Determines the direction of the layout of child elements. True for vertical and false for horizontal layout.

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

Default value is true.

Parameters:
booleanbVerticalNew value for property vertical
Returns:
sap.ui.layout.FixFlexReference to this in order to allow method chaining