FG jQuery Menu overflowing

I'm attempting to use the iPod Drilldown jquery plugin created by Filament Group.

It appears that when the HTML lists (that ultimately make up the drilldown menu) become too long, the drilldown menu will appear above the main button (and off screen).

To demonstrate... Compare this working version: http://goo.gl/OKGFn To this non-working version: http://goo.gl/LGMjV

The only difference between these URLS are the length of the lists.

开发者_JAVA百科I toggled the bottom CSS property on the generated div via Chrome devtools and the menu comes back into view. I attempted to remove this bottom CSS property using jquery, but I'm not able to modify it via $("#flyout").click because it does not exist immediately after the click...

How can I get the menu to display properly, independent of the lists length?

Edit 1: I've discovered it's an issue with the flyOut: true attribute. When this is disabled, the menu displays properly, but I still want the flyout functionality...

I had the same problem but the following solved it for me:

        . . .
        positionOpts: {posX: 'left', posY: 'bottom',  offsetX: -200, offsetY:-300},
        flyOut: true,
        . . .

but you must give at least those four attributes to positionOpts! If offsetX or offsetY is missing the menu will not show up at all. If posY is missing it behaves as 'top' i.e. always above the button.

Here's a simple solution, I neutralized the condition that places the bottom CSS property.

Line 503 in fg.menu.js

if (true || options.positionOpts.directionV == 'up') {

Your links are broken, but if is the same problem of me, the height of the content is checked only in the initialization, and not when you click to move between levels of the menu.

First, set the maxHeight to something relative of the size of your list:

.menu({
  maxHeight: 350
});

Then, in the fgmenu.js, change the function checkMenuHeight, to see the content div too:

var checkMenuHeight = function(el) {
  if (el.height() > options.maxHeight) {
    el.addClass('fg-menu-scroll')
  };
  el.css({
    height : options.maxHeight,
  });
  //add this test to grantee the content height to not be smaller then
  //the list that is shown 
  if (container.height() < options.maxHeight) {
    container.css({
      height : options.maxHeight,
    });
  }
};

Neither of these have worked for me. My issue was that when the screen height is too small to display the whole menu then it opens upward and not down, potentially running out of the screen. I wanted to force it to always open down and not up. This has been done by replacing the next row in fg.menu.js:

FROM:

if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 'auto', bottom: 0 }); };

TO:

if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 0, bottom: 'auto' }); };