• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

Layout

The StackLayout enables you to control its appearance. It exposes different configuration options which allow customizing the orientation of the component, the alignment of the inner elements and the gap between them.

Orientation

The StackLayout enables you to arrange its content either vertically or horizontally by setting its orientation property.

The following example demonstrates setting the StackLayout orientation.

Example
View Source
Change Theme:

Gap

In order to set gap between the StackLayout inner elements, utilize the gap property. It accepts values of type number and string. If a number value is provided, it will be treated as pixels. Providing a string value allows setting custom CSS units.

The following example demonstrates how to change the gap.

Example
View Source
Change Theme:

Alignment

To set the alignment of the inner StackLayout elements, utilize the align property. It accepts an AlignSettings configuration object with horizontal and vertical keys. This allows you to control the alignment based on the X and Y axes.

The available horizontal alignment options are:

  • start—Uses the start point of the X axis of the container.
  • center—Uses the central point of the X axis of the container.
  • end—Uses the end point of the X axis of the container.
  • stretch (Default)—Stretches the items to fill the width of the container.

The available vertical alignment options are:

  • top—Uses the start point of the Y axis of the container.
  • middle—Uses the central point of the Y axis of the container.
  • bottom—Uses the end point of the Y axis of the container.
  • stretch (Default)—Stretches the items to fill the height of the container.

The following example demonstrates the different alignment options in action.

Example
View Source
Change Theme:

Nested StackLayouts

The component enables you to create a more complex layout that includes both horizontal and vertical items by nesting multiple StackLayouts inside one another.

Example
View Source
Change Theme: