Button chevron

[Irvin Dominin]

Good morning,

I'm using the editable tp display a set of button, the toolbar is contained inside a wrapping div that have a fixed width. The set of button can be larger than the wrapping div, in this case the ejToolbar grow in height.

If the elements are larger then the toolbar I need to display a chevron and on clicking on it display a menu showing the not displayed buttons.

Can the ejToolbar be implemented with this feature?

Kind regards,

Irvin Dominin

[Harikrishnan P]

Hi Irvin,

Thanks for using Syncfusion products.

Query: The set of button can be larger than the wrapping div, in this case the ejToolbar grow in height.If the elements are larger then the toolbar I need to display a chevron and on clicking on it display a menu showing the not displayed buttons.

To achieve your requirement, use 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.

We have prepared a simple sample to showcase your requirement and it can be downloaded from the following location

Sample Location : Toolbar Sample

In the following location we have provided the getting started documentation for each controls. You can refer the “concepts and features” section to know more about the options available in each components.

http://help.syncfusion.com/web

Also, you can refer the following JavaScript API reference link, to identify the list of properties, methods and events supported by each JS component.

http://help.syncfusion.com/cr/js

Please get back to us if you have further queries.

Regards,

HariKrishnan

[Irvin Dominin]

Hi Irvin,

Thanks for using Syncfusion products.

Query: The set of button can be larger than the wrapping div, in this case the ejToolbar grow in height.If the elements are larger then the toolbar I need to display a chevron and on clicking on it display a menu showing the not displayed buttons.

To achieve your requirement, use 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.

We have prepared a simple sample to showcase your requirement and it can be downloaded from the following location

Sample Location : Toolbar Sample

In the following location we have provided the getting started documentation for each controls. You can refer the “concepts and features” section to know more about the options available in each components.

http://help.syncfusion.com/web

Also, you can refer the following JavaScript API reference link, to identify the list of properties, methods and events supported by each JS component.

http://help.syncfusion.com/cr/js

Please get back to us if you have further queries.

Regards,

HariKrishnan

Hi HariKrishnan,

sorry I missed the isResponsive option. I'm trying to use it, but setting it anything is displayed in the toolbar and all the options are inside che chevron menu.

In the attachment there is a sample, and I need to create the toolbar in this way; how can I solve the issue?

Kind regards,

Irvin Dominin

Attachment: Toolbar_responsive_Issue_15f5134a.zip

[Harikrishnan P]

Hi Irvin,

We have analyzed the sample that you have provided. It is found that you have placed all the toolbar items under the same group (same <ul> element). If the width of the Toolbar items in a group exceeds the width of the container means, then entire group (<ul> element) will be displayed only in the chevron menu. This is the behavior of Toolbar control.

To achieve your requirement, instead of specifying all the toolbar items under a single <ul> element, specify the toolbar items that exceeds the container width in a separate <ul> element. We have reattached the sample in the following location to showcase this.

Sample Location :  toolbar sample

Please let us know whether it helps for you. If still you face any difficulties, please get back to us we will be happy to assist you.

Regards,

HariKrishnan