YUI Menu rendering below "fold" on first open

Question

I have a YUI menu on the bottom navigation of the screen which creates a large white space beneath it where the action list would be rendered if visible...

On the first click the menu will render in that white space which requires the user to scroll to see it... on the second click however it will draw upward (ideally) so that the user does not have to scroll to see the menu... the second click also kills that block of white space...

i found adding a style of display:none to the div kills the white space... but then YUI doesn't set the display to block, which from what I understood it should... so I wrote another method that would do that manually... but the same behavior happens, the menu first renders below the fold requiring the user to scroll.... 2nd time its works fine... some reason the top/left positions are not being calculated properly on the first click and i cannot seem to figure out why

Answer 1

Have you tried using the constraintoviewport property for Menu's configuration options (search for it at YUI.widget.Menu):

(Inherited from YAHOO.widget.Overlay.) Boolean indicating if the Menu will try to remain inside the boundaries of the size of viewport. This property is only applied when the "position" configuration property is set to dynamic and is automatically applied to all submenus.

If you're using YUI.widget.Button, I believe you can get a reference to the Overlay property of that object and set constraintoviewport to true that way.

Answer 2

OK so I fixed it by simply adding a style to the div that contains the menu with the following attributes..

    position: absolute;
    left:0px;
    top:0px;

This way it will draw the div in the top left of the screen where there will always be content, and thus not creating whitespace. The whitespace was being created being that YUI uses visibility:hidden rather than display:none