New to Kendo UI for Angular? Start a free 30-day trial
Responsive ToolBar
The ToolBar enables you to hide the tools that do not fit its width in an overflow popup.
Basic Setup
To make the toolbar responsive, set the overflow input to true.
Example
View Source
Change Theme:
Advanced Configuration
You can set the ToolBar tools to display their text or icon either in the ToolBar or in its overflow popup by using the showText or showIcon inputs.
Example
View Source
Change Theme:
Popup Customization
You can customize the overflow button popup by setting the popupSettings property of the Toolbar.
The popupSettings input allows you to configure the following options:
animate: boolean—Controls the popup animation. By default, the open and close animations are enabled.popupClass: string—Specifies a list of CSS classes that are used to style the popup.
The following example demonstrates how to turn off the default open and close animations and assign a CSS class to the popup to customize its height.
Example
View Source
Change Theme:
