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

Adding Spacings between the ToolBar Tools


ProductProgress® Kendo UI for Angular ToolBar


How can I add space between the ToolBar tools?


Create a custom tool that holds a div container and add the k-spacer utility class to the parent element.

    <ng-template #toolbarTemplate>
        <div #spacer></div>
    public ngAfterViewInit(): void {

The k-spacer enables you to define additional white space between the toolbar tools and arrange them in accordance with your preference. By default, the k-spacer CSS class is equivalent to flex: 1 0 auto;. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.

The following example demonstrates the suggested approach.

View Source
Change Theme:

In this article

Not finding the help you need?