How to display chevron in Toolbar when the Toolbar items width exceeds the Toolbar width?
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.
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.
<!--Element that needs to be created as toolbar--> <div id="toolbar"> <ul> <li id="Left" title="Left"> <div class="ToolbarItems LeftAlign_tool"></div> </li> <li id="Center" title="Center"> <div class="ToolbarItems CenterAlign_tool"></div> </li> <li id="Right" title="Right"> <div class="ToolbarItems RightAlign_tool"></div> </li> <li id="Justify" title="Justify" class="e-separator"> <div class="ToolbarItems Justify_tool"></div> </li> <li id="Bold" title="Bold"> <div class="ToolbarItems Bold_tool"></div> </li> <li id="Italic" title="Italic"> <div class="ToolbarItems Italic_tool"></div> </li> <li id="StrikeThrough" title="Strike Through"> <div class="ToolbarItems StrikeThrough_tool"></div> </li> <li id="UndeLine" title="UnderLine"> <div class="ToolbarItems Underline_tool"></div> </li> </ul> <ul> <li id="Li1" title="OrderedList"> <div class="ToolbarItems orderlist"></div> </li> <li id="Li2" title="UnOrderedList" class="e-separator"> <div class="ToolbarItems unorderlist"></div> </li> <li id="Li3" title="IncreaseIndent"> <div class="ToolbarItems increaseindent"></div> </li> <li id="Li4" title="DecreaseIndent" class="e-separator"> <div class="ToolbarItems decreaseindent"></div> </li> <li id="Li5" title="SubsScript"> <div class="ToolbarItems subscript"></div> </li> <li id="Li6" title="SuperScript" class="e-separator"> <div class="ToolbarItems superscript"></div> </li> <li id="Li7" title="HyperLink"> <div class="ToolbarItems hyperlink"></div> </li> </ul> </div>
<style type="text/css" class="cssStyles"> /*CSS to specify the Toolbar Items*/ .e-tooltxt .ToolbarItems { background-image: url('../images/toolbar/ui-icons-metro.png'); }
.e-tooltxt .ToolbarItems, .disabletoolli.e-tooltxt:hover .ToolbarItems { display: block; background-image: url('../images/toolbar/ui-icons-dark.png'); height: 22px; width: 22px; }
.e-tooltxt:hover .ToolbarItems, .darktheme .cols-sample-area .e-tooltxt:hover .ToolbarItems { background-image: url('../images/toolbar/ui-icons-light.png'); }
.e-tooltxt:hover.e-disable .ToolbarItems, .darktheme .cols-sample-area .e-tooltxt:hover .e-disable .ToolbarItems { background-image: url('../images/toolbar/ui-icons-dark.png'); }
.ToolbarItems.LeftAlign_tool { background-position: -26px -39px; }
.ToolbarItems.CenterAlign_tool { background-position: -55px -39px; }
.ToolbarItems.RightAlign_tool { background-position: -89px -39px; }
.ToolbarItems.Justify_tool { background-position: -123px -39px; }
.ToolbarItems.Bold_tool { background-position: -159px -39px; }
.ToolbarItems.Italic_tool { background-position: -196px -39px; }
.ToolbarItems.StrikeThrough_tool { background-position: -55px -70px; }
.ToolbarItems.Underline_tool { background-position: -23px -68px; }
.ToolbarItems.orderlist { background-position: 320px 221px; }
.ToolbarItems.unorderlist { background-position: -26px -105px; } .ToolbarItems.increaseindent { background-position: -202px -101px; } .ToolbarItems.decreaseindent { background-position: -26px -141px; } .ToolbarItems.subscript { background-position: -52px -170px; } .ToolbarItems.superscript { background-position: -86px -172px; } .ToolbarItems.hyperlink { background-position: -126px -137px; }
.frame { height: 280px; width: 695px; border-radius: none; margin-left: 0; margin-top: 40px; padding: 0; }
.control { margin: 120px 230px 0; } </style>
|
<script type="text/javascript"> $(function () { $("#toolbar").ejToolbar({ width: "260px", height: "30px", orientation: ej.Orientation.Horizontal, enableSeparator:true, // To enable chevron menu isResponsive: true }); </script>
|
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.
Output:
Fig: Toolbar with chevron menu
Refer the following help documentation to know more about the options available in Toolbar component
https://helpjs.syncfusion.com/js/overview
