New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

StackLayout Overview

The ASP.NET MVC StackLayout is a component that easily aligns multiple elements in a vertical or horizontal order.

The StackLayout is supported only when you use Kendo UI themes.

Initializing the StackLayout

Use the Stack HtmlHelper to add the component and set the desired options:

Set the Width and Height for the component.
Set the Orientation to control the layout of the component.
Add the desired content. Each immediate child element will represent one stack layout item.

The following example demonstrates how to initialize a StackLayout component:

Razor

    @(Html.Kendo().StackLayout()
        .Name("stacklayout")
        .Width("100%")
        .Height("100%")
        .Orientation(StackLayoutOrientation.Horizontal)
        .Items(i=>{
            i.Add().Content(@<text>
                    <div style="background-color: aqua;">
                        Aqua colored stack item
                    </div>
                </text>);
            i.Add().Content(@<text>
                    <div style="background-color: cornflowerblue;">
                        Cornflowerblue colored stack item
                    </div>
                </text>);
            i.Add().Content(@<text>
                    <div style="background-color: blue;">
                        Blue colored stack item
                    </div>
                </text>);
        })
    )

Functionality and Features

Layout—To control the appearance of the component, you can use the built-in layout configuration.
Width and Height—The Width and Height configuration properties allow you to adjust the dimensions of the StackLayout component.

Next Steps

Configure the orientation, spacing and alignment of the StackLayout