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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Button chevron

Thread ID:

Created:

Updated:

Platform:

Replies:

118175 Feb 8,2015 09:04 PM UTC Feb 10,2015 01:00 PM UTC JavaScript 3
loading
Tags: ejToolbar
Irvin Dominin
Asked On February 8, 2015 09:04 PM UTC

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 [Syncfusion]
Replied On February 9, 2015 01:35 PM UTC

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
Replied On February 9, 2015 02:52 PM UTC

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 [Syncfusion]
Replied On February 10, 2015 01:00 PM UTC

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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;