We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display chevron in Toolbar when the Toolbar items width exceeds the Toolbar width?

Platform: JavaScript |
Control: ejToolbar |
Published Date: December 10, 2015 |
Last Revised Date: December 10, 2015
Tags: general

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">


                                <li id="Left" title="Left">

                                    <div class="ToolbarItems LeftAlign_tool"></div>


                                <li id="Center" title="Center">

                                    <div class="ToolbarItems CenterAlign_tool"></div>


                                <li id="Right" title="Right">

                                    <div class="ToolbarItems RightAlign_tool"></div>


                                <li id="Justify" title="Justify" class="e-separator">

                                    <div class="ToolbarItems Justify_tool"></div>


                                <li id="Bold" title="Bold">

                                    <div class="ToolbarItems Bold_tool"></div>


                                <li id="Italic" title="Italic">

                                    <div class="ToolbarItems Italic_tool"></div>


                                <li id="StrikeThrough" title="Strike Through">

                                    <div class="ToolbarItems StrikeThrough_tool"></div>


                                <li id="UndeLine" title="UnderLine">

                                    <div class="ToolbarItems Underline_tool"></div>




                                <li id="Li1" title="OrderedList">

                                    <div class="ToolbarItems orderlist"></div>


                                <li id="Li2" title="UnOrderedList" class="e-separator">

                                    <div class="ToolbarItems unorderlist"></div>


                                <li id="Li3" title="IncreaseIndent">

                                    <div class="ToolbarItems increaseindent"></div>


                                <li id="Li4" title="DecreaseIndent" class="e-separator">

                                    <div class="ToolbarItems decreaseindent"></div>


                                <li id="Li5" title="SubsScript">

                                    <div class="ToolbarItems subscript"></div>


                                <li id="Li6" title="SuperScript" class="e-separator">

                                    <div class="ToolbarItems superscript"></div>


                                <li id="Li7" title="HyperLink">

                                    <div class="ToolbarItems hyperlink"></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;






    <script type="text/javascript">

        $(function () {


                width: "260px",

                height: "30px",

                orientation: ej.Orientation.Horizontal,


                // To enable chevron menu

                isResponsive: true





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




You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon