• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Vue Wrappers End of Life
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Tools
    • Date Inputs
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
Components / Buttons / API / FloatingActionButtonAlign / 
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.

NameTypeDefaultDescription

horizontal?

"center" | "end" | "start"

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?

Contact Support