ICEfaces
  1. ICEfaces
  2. ICE-3658

Prevent menus from displaying off the top of the browser viewport

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 1.8
    • Fix Version/s: 1.8.1
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      all

      Description

      When a menubar is displayed at the right border of the browser window, the menu is shown outside of the window so that the user needs to scroll in order to see the menu.
      This should be avoided by showing the menu on the left side of the menubar instead of the right side.

      A patch to menu.js that works for us (not thoroughly tested):
       show: function(supermenu,submenu,submenuDiv) {
           supermenu=$(supermenu);
           submenu=$(submenu);
           submenuDiv=$(submenuDiv);
      if (submenu) {
      var menu = $(submenu);
      //menu is already visible, don't do anything
                  if (menu && menu.style.display=='') return;
                  Ice.Menu.showMenuWithId(submenu);
                  if (submenuDiv) {
                       // ICE-3196
                      var left;
                                      //check if menu is too far to the right
      if (Ice.Menu.getPosition(supermenu,'Left')+supermenu.offsetWidth+submenu.offsetWidth>document.documentElement.scrollLeft+document.body.clientWidth){
      left=-submenu.offsetWidth;
      }else{
      left=supermenu.offsetWidth;
      }
                                     //check if menu is too far on the botton
      var top=0;
      if (Ice.Menu.getPosition(supermenu,'Top')+submenu.offsetHeight>document.documentElement.scrollTop+document.body.clientHeight){
      top=-submenu.offsetHeight+supermenu.offsetHeight;
      }
                      submenu.clonePosition(supermenu, {setWidth:false, setHeight:false, offsetTop:top, offsetLeft:left});
                      submenu.clonePosition(submenuDiv, {setTop:false, setLeft:false, setWidth:false, setHeight:false});
                  } else {
                       // ICE-3196
                      submenu.clonePosition(supermenu, {setWidth:false, setHeight:false, offsetTop:supermenu.offsetHeight});
                  }
                  Ice.Menu.showIframe(submenu); // ICE-2066, ICE-2912
      }
              Ice.Menu.currentMenu = submenu;
          },
      1. ScreenHunter_01.jpg
        77 kB
      2. ScreenHunter_01.jpg
        70 kB
      3. ScreenHunter_05.jpg
        69 kB

        Issue Links

          Activity

          Stefan Niederhauser created issue -
          Stefan Niederhauser made changes -
          Field Original Value New Value
          Link This issue duplicates ICE-3620 [ ICE-3620 ]
          Hide
          Stefan Niederhauser added a comment -

          This is fixed in 1.8.0 (see ICE-3620).
          One last thing is that if the menu is displayed upwards, it is possible that the top part of it is outside the viewport.
          Simply add a check if submenu.offsetTop<0 and if so, set submenu.style.top='0px';

          Show
          Stefan Niederhauser added a comment - This is fixed in 1.8.0 (see ICE-3620 ). One last thing is that if the menu is displayed upwards, it is possible that the top part of it is outside the viewport. Simply add a check if submenu.offsetTop<0 and if so, set submenu.style.top='0px';
          Ken Fyten made changes -
          Summary Show menus at the left/top of the menubar when it is too close to the right/bottom border of the browser viewport. Prevent menus from displaying off the top of the browser viewport
          Salesforce Case []
          Fix Version/s 1.8.1 [ 10170 ]
          Assignee Priority P3
          Affects Version/s 1.8 [ 10161 ]
          Affects Version/s 1.7.2 [ 10130 ]
          Assignee Yip Ng [ yip.ng ]
          Priority Major [ 3 ] Minor [ 4 ]
          Hide
          Ken Fyten added a comment -

          Please review the suggested contributed fix for this in the previous comment and commit if appropriate.

          Show
          Ken Fyten added a comment - Please review the suggested contributed fix for this in the previous comment and commit if appropriate.
          yip.ng made changes -
          Attachment ScreenHunter_01.jpg [ 11721 ]
          Hide
          yip.ng added a comment -

          Doesn't work. offsetTop is with reference to the positioning context (document if no positioning context), not the viewport. The viewport can be far below the document start. In that case offsetTop will always be > 0. See attached ScreenHunter_01.jpg.

          Show
          yip.ng added a comment - Doesn't work. offsetTop is with reference to the positioning context (document if no positioning context), not the viewport. The viewport can be far below the document start. In that case offsetTop will always be > 0. See attached ScreenHunter_01.jpg.
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #18851 Thu May 07 15:32:43 MDT 2009 yip.ng ICE-3658
          Changed to prevent menus from displaying off the top of the browser viewport.
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/bridge/component/menu.js
          yip.ng made changes -
          Attachment ScreenHunter_01.jpg [ 11724 ]
          Hide
          yip.ng added a comment -

          Further, top is also relative to positioning context, not viewport. Setting top to 0 won't necessarily align with top of viewport. See attached screehshot.

          Show
          yip.ng added a comment - Further, top is also relative to positioning context, not viewport. Setting top to 0 won't necessarily align with top of viewport. See attached screehshot.
          yip.ng made changes -
          Attachment ScreenHunter_05.jpg [ 11730 ]
          Hide
          yip.ng added a comment - - edited

          Fixed using more complicated positioning and viewport calculations. See attached screenshot ScreenHunter_05.jpg.

          Show
          yip.ng added a comment - - edited Fixed using more complicated positioning and viewport calculations. See attached screenshot ScreenHunter_05.jpg.
          yip.ng made changes -
          Status Open [ 1 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Ken Fyten made changes -
          Status Resolved [ 5 ] Closed [ 6 ]
          Assignee Priority P3

            People

            • Assignee:
              yip.ng
              Reporter:
              Stefan Niederhauser
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: