Jquery Context Menu expands past the top of the browser

[OttawaIan]

I have been trying to work through an issue where I have been using the jquery context menu, but the menu expands past the top of the browser, if you browser is very small. The top items in the menu get truncated. It doesn't appear to be an issue if you are at the bottom of the page, it doesn't get truncated that way. The simple demos on the site can easily demonstrate this issue. http://medialize.github.io/jQuery-contextMenu/demo.html

Any ideas on how I can prevent this, I tried the position function without much luck. I also tried adding a scrollbar to the menu via a css style which isn't ideal and still gets truncated at the top of the page.

Thanks,

Here is my example

$(function(){      

    var singleTargetItems = {
        // standard menu items
        edit: {name: "EDIT", url: "doEdit", method: setIDsForPopUpMenu},
        copy: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu},

copy1: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy2: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy3: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy4: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy5: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy6: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy7: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy8: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy9: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy10: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy11: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy12: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy13: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, copy14: {name: "COPY", url: "doCopy", method: setIDsForPopUpMenu}, };

$.contextMenu({
selector: "tr.context-menu-target",
build: function($trigger, e) { return { callback: function(key, options) {
var ctx = getMenuItems()[key]; var url = ctx.url; var method = ctx.method;
var ids = options.$trigger.attr("popupIds"); method.call(this, ids, url); }, items: getMenuItems(),
}; } });

    function getMenuItems() {            
            stdItems = singleTargetItems;            
            var allItems = $.extend({}, stdItems, customItems);
            return allItems;
    }

[OttawaIan]

I have noticed there is a check to make sure the menu doesn't extend past the end of the page, but there is no check to see if by doing this it extends past the top of the browser window.

Line 135 in the jquery.context.menu.js is the check that flips the menu from going from the current position down to be from the current position upwards but this then forces the menu beyond the top of the screen. I think there needs to be a few more checks to see if this situation will occur

position: function(opt, x, y) { ... ...

if (offset.top + height > bottom) { offset.top -= height; } ...