EasyUI Forum

General Category => Bug Report => Topic started by: eliraz on March 18, 2014, 01:44:48 PM



Title: menu button rtl bug
Post by: eliraz on March 18, 2014, 01:44:48 PM
when i use menu button on RTL mode, and there is no room to the left of the screen for it to open, it stays on left side all the time, instade of going into right side like when not useing RTL.

what can i do?


Title: Re: menu button rtl bug
Post by: stworthy on March 18, 2014, 09:00:07 PM
To solve this issue, you will have to override the 'show' method of menu. The original implementation shows as below:
Code:
	$.fn.menu.methods.show = function(jq, param){
return jq.each(function(){
var target = this;
var left,top;
param = param || {};
var menu = $(param.menu || target);
if (menu.hasClass('menu-top')){
var opts = $.data(target, 'menu').options;
$.extend(opts, param);
left = opts.left;
top = opts.top;
if (opts.alignTo){
var at = $(opts.alignTo);
left = at.offset().left + at._outerWidth();
top = at.offset().top + at._outerHeight();
}
// if (param.left != undefined){left = param.left}
// if (param.top != undefined){top = param.top}
left -= menu.outerWidth();
if (top + menu.outerHeight() > $(window)._outerHeight() + $(document).scrollTop()){
// top -= menu.outerHeight();
top = $(window)._outerHeight() + $(document).scrollTop() - menu.outerHeight() - 5;
}
} else {
var parent = param.parent; // the parent menu item
left = parent.offset().left - menu.outerWidth() + 2;
var top = parent.offset().top - 3;
if (top + menu.outerHeight() > $(window)._outerHeight() + $(document).scrollTop()){
top = $(window)._outerHeight() + $(document).scrollTop() - menu.outerHeight() - 5;
}
}
menu.css({left:left,top:top});
menu.show(0, function(){
if (!menu[0].shadow){
menu[0].shadow = $('<div class="menu-shadow"></div>').insertAfter(menu);
}
menu[0].shadow.css({
display:'block',
zIndex:$.fn.menu.defaults.zIndex++,
left:menu.css('left'),
top:menu.css('top'),
width:menu.outerWidth(),
height:menu.outerHeight()
});
menu.css('z-index', $.fn.menu.defaults.zIndex++);
if (menu.hasClass('menu-top')){
$.data(menu[0], 'menu').options.onShow.call(menu[0]);
}
});
});
}