How to display chevron in Toolbar when the Toolbar items width exceeds the Toolbar width
Sometimes there may be need to wrap the Toolbar inside a div having fixed width, at the same time, the toolbar items may be more in number and width of individual toolbar items can exceed the width of the containing div. Now, you can see that the Toolbar grow in size when the toolbar items width exceeds the container width. For this case, we wish to show a chevron menu.
When Toolbar items equals the width of the Toolbar, the remaining toolbar items will be hidden and a menu icon will be displayed. On clicking on it display a menu showing the not displayed items.
We can achieve this (display the chevron menu) using the property called “isResponsive”, which is available in our ejToolbar control. This API is Boolean type. If we enable this property and when the width of the toolbar items are larger than the width of the containing div, chevron will be created. When it is clicked a menu will open to display the toolbar items that are not displayed.
The following code snippet showcases how chevron menu can be enabled in our ejToolbar component.
As we can see from the above code blocks, there are more number of Toolbar items and their width is greater than specified width (“240px”) of Toolbar. So the Mail Icons are displayed in the chevron menu.
Fig: Toolbar with chevron menu
Refer the following help documentation to know more about the options available in Toolbar component
|Article ID:||Published Date:||Last Revised Date:||Platform:||Control:|