Getting Started
    Native Components
    • Animation
    • Buttons
    • Charts
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • Notificationnew
    • PDF Processing
    • Popup
    • Progress Bars
    • Schedulernew
    • ScrollViewnew
    • Tooltip
    • TreeViewnew
    • Upload
    Wrapper Components
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to Kendo UI for Vue? Start a free 30-day trial

FloatingActionButtonAlign

Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container.

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

horizontal?

"start" | "center" | "end"

Defines the possible horizontal alignment of the Floating Action Button.

The available values are:

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

vertical?

"top" | "middle" | "bottom"

Defines the possible vertical alignment of the Floating Action Button.

The available values are:

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

In this article

Not finding the help you need?