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