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. Image for the cookie policy date

ejMenu - open it inside the viewport

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

3 Replies

SN Sasikala Nagarajan Syncfusion Team 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



ID Irvin Dominin 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


SN Sasikala Nagarajan Syncfusion Team 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

Loader.
Live Chat Icon For mobile
Up arrow icon