Centering Buttons on a ToolBar.

[Gregory]

Is there way to simply center the items on a Tool bar in the middle of the toolbar. 

[Vasko]

Hello Gregory,

 

There is a way to center the items on a Toolbar built into the component - the Spacer Command Type. With it, you can align the toolbar items left or right of each other, or center them in the middle of the Toolbar, depending on what you want to achieve. Here's the sample code I used where I have 5 items on a Toolbar (which has the Spacer Command Type):  

@(Html.Kendo().ToolBar()
    .Name("ToolBar")
    .Items(items =>
    {
        items.Add().Type(CommandType.Spacer); // The Spacer here creates "space" for items declared after it

        items.Add().Type(CommandType.Button).Text("Button");
        items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
        items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
        {
            buttons.Add().Text("Bold").Togglable(true).Icon("bold");
            buttons.Add().Text("Italic").Togglable(true).Icon("italic");
            buttons.Add().Text("Underline").Togglable(true).Icon("underline");
        });

        items.Add().Type(CommandType.Spacer); // The Spacer here creates "space" for items declared before it
    })
)

I've also attached screenshots so you can see the results with and without using the Spacer and in addition, added some comments for clarification on what is happening. I hope this solution helps you out.

 

Kind regards,
Vasko
Progress Telerik