ICEfaces
  1. ICEfaces
  2. ICE-9650

ice:menuBar - menuItems display incorrectly

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Won't Fix
    • Affects Version/s: EE-3.3.0.GA, EE-3.3.0.GA_P01
    • Fix Version/s: EE-3.3.0.GA_P02
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      All
    • Assignee Priority:
      P1
    • Salesforce Case Reference:
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Compatibility/Configuration
    • Workaround Exists:
      Yes
    • Workaround Description:
      Applications affected by this issue should simply add a component or HTML element with position:absolute; as an ancestor of the menu bar.

      Description

      With the ICEfaces 3.x code base, the menuItems for the ice:menuBar component are displayed incorrectly. Instead of displaying directly below the parent menuItem it is displayed to the left and above where it should be, or as it was in ICEfaces 1.8.x

        Activity

        Arran Mccullough created issue -
        Hide
        Arran Mccullough added a comment -

        Attached test case and screen shot of the issue. Note, the icefaces.jar, icefaces-ace.jar and icefaces-compat.jar files need to be added to the war file to run.

        Show
        Arran Mccullough added a comment - Attached test case and screen shot of the issue. Note, the icefaces.jar, icefaces-ace.jar and icefaces-compat.jar files need to be added to the war file to run.
        Arran Mccullough made changes -
        Field Original Value New Value
        Attachment Case12441Example.war [ 16530 ]
        Attachment Case12441Example.zip [ 16531 ]
        Attachment menuBar-display-offset-issue.jpg [ 16532 ]
        Arran Mccullough made changes -
        Salesforce Case Reference 5007000000WgwWlAAJ
        Ken Fyten made changes -
        Assignee Arturo Zambrano [ artzambrano ]
        Fix Version/s 3.4 [ 10770 ]
        Fix Version/s EE-3.3.0.GA_P02 [ 11371 ]
        Priority Major [ 3 ] Minor [ 4 ]
        Assignee Priority P2 [ 10011 ]
        Ken Fyten made changes -
        Assignee Priority P2 [ 10011 ] P1 [ 10010 ]
        Ken Fyten made changes -
        Fix Version/s 4.0.BETA [ 10770 ]
        Ken Fyten made changes -
        Affects Version/s 4.0.BETA [ 10770 ]
        Hide
        Arturo Zambrano added a comment -

        r40396: Committed fix to 3.3 EE branch. Added position:absolute; to menuBar root node's CSS classes (horizontal and vertical) in all themes.

        I found out that on the showcase app, the menu bar submenu's displayed correctly, and the difference was simply that, in the showcase, the menu had at least one absolute-positioned ancestor node. So, the issue could be fixed at the app code level by simply adding an absolute-positioned ancestor, including the root container of the component. So, I tried a less-intrusive approach consisting of temporarily setting position:absolute; to the root container when calculating the position of the submenus and then setting it back to whatever it was. However, the submenus were misplaced again when the root container was reset to relative position, so it meant that the positions set on the submenus were in relation to the nearest absolute-positioned node, which meant that there had to be a permanent absolute-positioned ancestor for the menu bar. So, I tried adding an inner div, just under the root container to simply contain position:absolute;. However, with this, the submenus didn't appear at all, due to several expectations throughout the menuBar code. So, the only solution was to make the root container of the menu bar absolute positioned. So, I added position:absolute; to the root container's CSS classes for horizontal and vertical nodes in all themes. This solves the problem and can be easily overridden by the app code, if necessary.

        Testing notes:
        Verify that the test case works when using any of the compat themes; verify that the showcase demos continue to work correctly, and run all regression tests for this component.

        Show
        Arturo Zambrano added a comment - r40396: Committed fix to 3.3 EE branch. Added position:absolute; to menuBar root node's CSS classes (horizontal and vertical) in all themes. I found out that on the showcase app, the menu bar submenu's displayed correctly, and the difference was simply that, in the showcase, the menu had at least one absolute-positioned ancestor node. So, the issue could be fixed at the app code level by simply adding an absolute-positioned ancestor, including the root container of the component. So, I tried a less-intrusive approach consisting of temporarily setting position:absolute; to the root container when calculating the position of the submenus and then setting it back to whatever it was. However, the submenus were misplaced again when the root container was reset to relative position, so it meant that the positions set on the submenus were in relation to the nearest absolute-positioned node, which meant that there had to be a permanent absolute-positioned ancestor for the menu bar. So, I tried adding an inner div, just under the root container to simply contain position:absolute;. However, with this, the submenus didn't appear at all, due to several expectations throughout the menuBar code. So, the only solution was to make the root container of the menu bar absolute positioned. So, I added position:absolute; to the root container's CSS classes for horizontal and vertical nodes in all themes. This solves the problem and can be easily overridden by the app code, if necessary. Testing notes: Verify that the test case works when using any of the compat themes; verify that the showcase demos continue to work correctly, and run all regression tests for this component.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Liana Munroe made changes -
        Comment [ At this time showcase on maintenance branch has several errors upon launch. See ICE-9887 for a list of errors seen while confirminh that JIRA in showcase on ee-3.3.0 maintenance branch. ]
        Hide
        Liana Munroe added a comment - - edited

        The test case attached to this JIRA passes but there are Component showcase issues.
        IE 7: Menu bar in component-showcase. The first time that the Menu Bar demo is launched, the menu does not render as under the menu bar, but far to the right. Only seen in rime theme since it is the default. See screen shot menuBar1.png
        *note, not able to reliably reproduce the menu rendering to the right so this may be an icetest-xp02 issue.

        Menu Bar and Dynamic Menu Bar in component-showcase.
        In all themes and all browsers the Menu Bar itself is too low in its container. See screen shot menuBar1.png.

        Show
        Liana Munroe added a comment - - edited The test case attached to this JIRA passes but there are Component showcase issues. IE 7: Menu bar in component-showcase. The first time that the Menu Bar demo is launched, the menu does not render as under the menu bar, but far to the right. Only seen in rime theme since it is the default. See screen shot menuBar1.png *note, not able to reliably reproduce the menu rendering to the right so this may be an icetest-xp02 issue. Menu Bar and Dynamic Menu Bar in component-showcase. In all themes and all browsers the Menu Bar itself is too low in its container. See screen shot menuBar1.png.
        Liana Munroe made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Liana Munroe made changes -
        Attachment menuBar1.PNG [ 17009 ]
        Hide
        Arturo Zambrano added a comment -

        Menu Bar and Dynamic Menu Bar in component-showcase.
        In all themes and all browsers the Menu Bar itself is too low in its container. See screen shot menuBar1.png.

        Added height to panelGroup containing menu bar, since now menu bars are absolutely positioned (r40694).

        Show
        Arturo Zambrano added a comment - Menu Bar and Dynamic Menu Bar in component-showcase. In all themes and all browsers the Menu Bar itself is too low in its container. See screen shot menuBar1.png. Added height to panelGroup containing menu bar, since now menu bars are absolutely positioned (r40694).
        Hide
        Arturo Zambrano added a comment -

        IE 7: Menu bar in component-showcase. The first time that the Menu Bar demo is launched, the menu does not render as under the menu bar, but far to the right. Only seen in rime theme since it is the default. See screen shot menuBar1.png
        *note, not able to reliably reproduce the menu rendering to the right so this may be an icetest-xp02 issue.

        Couldn't reproduce this issue on icepcvm-ie7 or on IE11 in IE7 mode.

        Show
        Arturo Zambrano added a comment - IE 7: Menu bar in component-showcase. The first time that the Menu Bar demo is launched, the menu does not render as under the menu bar, but far to the right. Only seen in rime theme since it is the default. See screen shot menuBar1.png *note, not able to reliably reproduce the menu rendering to the right so this may be an icetest-xp02 issue. Couldn't reproduce this issue on icepcvm-ie7 or on IE11 in IE7 mode.
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Liana Munroe added a comment -

        Menu positioning confirmed fixed. Icefaces ee-3.3.0 maintenance branch r40695.

        Show
        Liana Munroe added a comment - Menu positioning confirmed fixed. Icefaces ee-3.3.0 maintenance branch r40695.
        Hide
        Ken Fyten added a comment -

        Existing applications may need to modify their CSS style to account for the new absolute positioning of the menu. This will be documented in the Release Notes.

        Show
        Ken Fyten added a comment - Existing applications may need to modify their CSS style to account for the new absolute positioning of the menu. This will be documented in the Release Notes.
        Ken Fyten made changes -
        Affects Documentation (User Guide, Ref. Guide, etc.),Compatibility/Configuration [ 10003, 10002 ]
        Hide
        Ken Fyten added a comment -

        Re-opening to revert this component change is it will causes undesirable issues for existing applications. Instead of potentially forcing many apps. to adjust to this change, we will let the apps that are specifically affected by this issue adopt the application-level styling work-around.

        Show
        Ken Fyten added a comment - Re-opening to revert this component change is it will causes undesirable issues for existing applications. Instead of potentially forcing many apps. to adjust to this change, we will let the apps that are specifically affected by this issue adopt the application-level styling work-around.
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Arturo Zambrano added a comment -

        Reverted fix at revision 40843.

        Show
        Arturo Zambrano added a comment - Reverted fix at revision 40843.
        Hide
        Arturo Zambrano added a comment -

        Resolving as Won't Fix.

        Applications affected by this issue should simply add a component or HTML element with position:absolute; as an ancestor of the menu bar.

        Show
        Arturo Zambrano added a comment - Resolving as Won't Fix. Applications affected by this issue should simply add a component or HTML element with position:absolute; as an ancestor of the menu bar.
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Won't Fix [ 2 ]
        Ken Fyten made changes -
        Workaround Description Applications affected by this issue should simply add a component or HTML element with position:absolute; as an ancestor of the menu bar.
        Workaround Exists Yes [ 10007 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: