New to Kendo UI for Angular? Start a free 30-day trial

Positioning

The FloatingActionButton provides options for aligning and positioning in relation to a web page, an HTML element, or an Angular Component.

You can set that position with regard to either the browser viewport or to a relative container to fixed or absolute respectively.

Position Mode

To specify the type of positioning for the FloatingActionButton, use the positionMode property.

The FloatingActionButton provides the following options for setting the position mode:

  • fixed(Default)Positions the FloatingActionButton related to the viewport. It always stays in the same place even if the page is scrolled.
  • absolutePositions the FloatingActionButton related to the nearest positioned ancestor. If an absolutely positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Example
View Source
Edit In Stackblitz  
Change Theme:

Alignment

The FloatingActionButton allows you to set horizontal and vertical alignment with regard to the viewport, HTML element, or Angular Component. The component supports the align keys for the horizontal and vertical directions.

The horizontal setting defines the possible horizontal alignment of the FloatingActionButton and provides the following options:

  • startUses the start point of the container.
  • centerUses the center point of the container.
  • end(Default)Uses the end point of the container

The vertical setting defines the possible vertical alignment of the FloatingActionButton and provides the following options:

  • topUses the top point of the container.
  • middleUses the middle point of the container.
  • bottom(Default)Uses the bottom point of the container.

Centering the FloatingActionButton in both horizontal and vertical dimension is not a typical use case. Still, it is possible to achieve such a layout with the appropriate offsets. Setting horizontal: 'center' and vertical: 'middle' at the same time is not supported.

The following example demonstrates how to set up the alignment of the FloatingActionButton.

Example
View Source
Edit In Stackblitz  
Change Theme:

Offset

The FloatingActionButton allows you to specify an offset with regard to its current position set by the align property. To specify the offset, use the offset property.

Normally, the floating button is positioned next to the boundaries of its container with a default offset of 16px.

If the button is in a corner, positive offsets will move the button horizontally or vertically further from this corner. For example, if the button is aligned to the top-left position, positive offsets can move it down or right. If the button is aligned to the bottom-right position, positive offsets will move it up or left.

Floating buttons in the middle of the container boundary have a slightly different behavior. Positive offsets will move those buttons closer to a corner or closer to the center of the container. For example, if the button is aligned to the bottom-center position, a positive x offset will move it right, and a positive y offset will move it up.

Negative offsets can move floating buttons in the opposite direction. For example, you can use them to force a button to overflow the boundaries of its container.

The available offset values are:

  • xDefines the horizontal offset of the FloatingActionButton.
  • yDefines the vertical offset of the FloatingActionButton.

The following example demonstrates how to use the offset feature of the FloatingActionButton.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?