2 Replies Latest reply on Dec 19, 2011 12:52 PM by siteburn

    rich:contextMenu to put forward (z-Index)

    siteburn Newbie

      I use Richfaces 3.3.3 and JSF 2.0 on a JBoss 6.1 AS. The Layout of the Page is from http://layout.jquery-dev.net/demos/simple.html. The Tree is a rich:tree and the Context-Menu is a rich:contextMenu.

       

      I will show my problem in a picture:

      contextMenu.png

       

      When i use the allowOverflow() - Method from the jQuery-UI-Layout:

       

      01_allowOverflow.png

       

      Any idea?

       

      Thanks,

       

      Siteburn

        • 1. Re: rich:contextMenu to put forward (z-Index)
          siteburn Newbie

          My first approach was:

           

          rich:contextMenu - attributes:

          • onexpand="document.body.appendChild(document.getElementById(#{rich:element('myContextMenuID')}.id)); document.getElementById(#{rich:element('myContextMenuID')}.id).style.zIndex = 10;"
          • oncollapse="document.body.removeChild(document.getElementById(#{rich:element('myContextMenuID')}.id));"

           

          It works, but it crashes with internal richfaces-scripts.

           

          Could anybody help me with my problem?

           

          Thanks, Siteburn

          • 2. Re: rich:contextMenu to put forward (z-Index)
            siteburn Newbie

            My Solution:

             

            <rich:contextMenu .... onexpand="contextMenuAtOpen(this.id, event);" oncollapse="contextMenuAtClose(this.id);" >....

             

            JavaScript:

            var contextParent;

            //params: Element ID and Event
            function contextMenuAtOpen(a, e) {
                     var elem = document.getElementById(a);
                     contextParent = elem.parentNode.id;
                     document.body.appendChild(elem);
                     elem.style.zIndex = 10;
                     elem.style.position = 'absolute';

                    var windowHeight = document.body.clientHeight;

                    elem.style.display = 'block';
                     var elementHeight = elem.offsetHeight;

                    if (e.pageY > windowHeight-elementHeight) {
                             elem.style.top = e.pageY-elementHeight + "px";
                     } else {
                             elem.style.top = e.pageY + "px";
                     }

            };

            //params: Element ID

            function contextMenuAtClose(a) {

                     var elem = document.getElementById(a);

                     document.getElementById(contextParent).appendChild(elem);

                     contextParent = null;

            };