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

        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.
        Hide
        Arturo Zambrano added a comment -

        Reverted fix at revision 40843.

        Show
        Arturo Zambrano added a comment - Reverted fix at revision 40843.
        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.
        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.
        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
        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.
        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
        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.
        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.
        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.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: