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.
Unfortunately, activation email could not send to your email. Please try again.

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

http://helpjs.syncfusion.com/js/overview

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
5843 12/10/2015 12/10/2015 JavaScript ejToolbar
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.