Skip to content

Merge vertical-toolbar-3106 into production #3109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 16, 2025
Merged

Merge vertical-toolbar-3106 into production #3109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion components/toolbar/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,5 @@ You can increase or decrease the size of the ToolBar by setting the `Size` param

## See Also

* [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
* [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
* [Vertical ToolBar](slug:toolbar-kb-vertical-orientation-display)
133 changes: 133 additions & 0 deletions knowledge-base/toolbar-vertical-orientation-display.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
---
title: Display Vertical ToolBar
description: Learn how to display the Telerik ToolBar for Blazor vertically.
type: how-to
page_title: How to Display Vertical ToolBar
slug: toolbar-kb-vertical-orientation-display
tags: telerik, blazor, toolbar
ticketid: 1693045
res_type: kb
---

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>ToolBar for Blazor</td>
</tr>
</tbody>
</table>

## Description

This KB answers the following questions:

* How to display the TelerikToolBar vertically?
* How to render the Telerik ToolBar for Blazor with vertical orientation?
* How to arrange the ToolBar buttons one below the other?

## Solution

1. Disable the automatic tool overflowing with `OverflowMode="@ToolBarOverflowMode.None"` or `Adaptive="false"` in older versions.
1. Set a custom CSS class to the ToolBar with the `Class` parameter.
1. Use the custom CSS class to [override the ToolBar CSS styles](slug:themes-override):
* Set `column` `flex-flow` for the ToolBar and any nested [ButtonGroups](slug:toolbar-built-in-tools#toolbarbuttongroup). See [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more information.
* Reduce the component `width`.
* Adjust the `border-radius` values of buttons inside nested ButtonGroups.

>caption Configure a vertical Telerik ToolBar for Blazor
````RAZOR
<h4>Block ToolBar</h4>
before
<TelerikToolBar Class="vertical-toolbar" Adaptive="false">
<ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ToolBarToggleButton Icon="@SvgIcon.Bold" @bind-Selected="@BoldSelected" />
<ToolBarToggleButton Icon="@SvgIcon.Italic" @bind-Selected="@ItalicSelected" />
<ToolBarToggleButton Icon="@SvgIcon.Underline" @bind-Selected="@UnderlineSelected" />
</ToolBarButtonGroup>
<ToolBarButton Icon="@SvgIcon.Save"></ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Cancel"></ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Trash"></ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Undo"></ToolBarButton>
</TelerikToolBar>
after
<h4>Inline ToolBar</h4>
before
<TelerikToolBar Class="vertical-toolbar inline-toolbar" Adaptive="false">
<ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ToolBarToggleButton Icon="@SvgIcon.Bold" @bind-Selected="@BoldSelected" />
<ToolBarToggleButton Icon="@SvgIcon.Italic" @bind-Selected="@ItalicSelected" />
<ToolBarToggleButton Icon="@SvgIcon.Underline" @bind-Selected="@UnderlineSelected" />
</ToolBarButtonGroup>
<ToolBarButton Icon="@SvgIcon.Save"></ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Cancel"></ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Trash"></ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Undo"></ToolBarButton>
</TelerikToolBar>
after
<style>
/* Optional inline display */
.vertical-toolbar.inline-toolbar {
display: inline-flex;
}
/* Apply vertical orientation */
.vertical-toolbar,
.vertical-toolbar .k-button-group {
flex-flow: column wrap;
}
/* Reduce width */
.vertical-toolbar {
width: min-content;
}
/* Remove unnecessary empty space at the top */
.vertical-toolbar::before {
content: none;
}
/* Adjust rounded corners in Button Groups */
.vertical-toolbar .k-button-group > .k-button:first-child {
border-start-end-radius: 4px;
border-end-start-radius: 0;
}
.vertical-toolbar .k-button-group > .k-button:last-child {
border-start-end-radius: 0;
border-end-start-radius: 4px;
}
.vertical-toolbar .k-button-group > .k-button + .k-button {
margin-inline-start: 0;
margin-block-start: -1px;
}
</style>
@code {
private bool BoldSelected { get; set; }
private bool ItalicSelected { get; set; }
private bool UnderlineSelected { get; set; }
}
````

## See Also

* [ToolBar Overview](slug:toolbar-overview)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy