Overlaypanel issue when not enough space

[adi]

Hi,

I'm using an overlaypanel as follows:

Code: Select all

                
<p:commandLink value="#{msg['page.viewBuilder.link.label.selection']}" type="button" id="selectionsLink"/>
 <p:overlayPanel id="selectionsOverlayPanel" for="selectionsLink" hideEffect="fade" showEvent="mouseover" hideEvent="mousedown"
                            my="left top" >
                <p:tabView id="tabSelection" cache="false" dynamic="false" activeIndex="0">
                //some tabs
                </p:tabView>
 </p:overlayPanel>

It works pretty well but when I make the browser's window a bit smaller it gets displayed above the button instead below as it is supposed to.
As a consequence I can't see it's content.

My quetsion is: How can I force the overlaypanel to be displayed always under the button?

[adi]

The problem is that when there's not enough space to display the overlaypanel below the button the css attibute 'top' is set to a negative value.
As a workaround I call a javascript function on the onshow event:

Code: Select all

<p:overlayPanel id="selectionsOverlayPanel" for="selectionsLink" hideEffect="fade" showEvent="mouseover" hideEvent="mousedown"
                            my="left top" onShow="showOverlayPanel()">

Code: Select all

        function showOverlayPanel() {
            var top = parseFloat($('#selectionsOverlayPanel').css('top'));

            if(!isNaN(top) && top < 0) {
                $('#selectionsOverlayPanel').css('top', '160px');
            }
        };