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.
Syncfusion Feedback

ejMenu - open it inside the viewport

Thread ID:

Created:

Updated:

Platform:

Replies:

119421 Jun 18,2015 09:49 AM UTC Jun 25,2015 12:17 PM UTC JavaScript 3
loading
Tags: ejMenu
Irvin Dominin
Asked On June 18, 2015 09:49 AM UTC

Good morning,

I'm using ejMenu to show a menu by clicking on an element. I need to do it programmatically because of our page implementation.

To do so I'm using the following code:
                        $ejMenu.show(newPosition.left, newPosition.top, $(e.element));
the newPosition object contains the position of the clicked element and show the menu at its bottom-left.

The issue I'm facing is that if the clicked element is a position where the menu element cannot be shown in the viewport; the effect is:
 

is there a way to set the menu opening in order to open inside the viewport?

Kind regards,
Irvin Dominin

Sasikala Nagarajan [Syncfusion]
Replied On June 24, 2015 01:28 PM UTC

Hi Irvin,
We have analyzed your query and we can achieve your requirement using our existing property “enableRTL”.This API is used to float the menu in Right to Left Direction

Please refer the below code snippet

jQuery(function ($) {

$("#vertical").ejMenu({

menuType: ej.MenuType.NormalMenu,

orientation: ej.Orientation.Vertical

});

$("#vertical").ejMenu('hide');

});

$("a[rel='nofollow' href]").click(function () {

$("#vertical").ejMenu('show');

if (screen.width < $(".e-menu-wrap").width() + $("a[rel='nofollow' href]").position().left) {

s = $("#vertical").data('ejMenu');

s.option("enableRTL", true);

$(".e-menu-wrap").css({ position: "absolute", top: $("a[rel='nofollow' href]").position().top + 20, left: $("a[rel='nofollow' href]").position().left - $("a[rel='nofollow' href]").width() });

}
});


In this we have applied enableRTL property if menu width crosses the screen width. So menu will open in right to left direction.

For your convenience we have prepared the simple sample based on this. Please get the sample from below location

Sample

Please check with the given sample. If we misunderstood your query, can you please provide more details to reproduce the reported issue in our end. if possible can you please reproduce the issue in given sample and revert us the modified sample that will be helpful for us to provide the prompt solution.

Regards,

Sasikala Nagarajan


Irvin Dominin
Replied On June 24, 2015 03:10 PM UTC

Hi Sasikala,

yes you got the problem! I hope for a default option/behaviour for this situatio, but your workaround works pretty well.

I handled the same for a case where the menu opener is at the page bottom and your workaround works well here too.

Thanks a lot for the support.

Kind regards,
Irvin Dominin

Sasikala Nagarajan [Syncfusion]
Replied On June 25, 2015 12:17 PM UTC

Hi Irvin,
Thanks for the update,please let us know if you have further quieries.We will be happy to help you out.
Regards,
Sasikala Nagarjan

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

;