ICEfaces
  1. ICEfaces
  2. ICE-3390

Menu style components get rendered underneath portlet containers

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.7.1
    • Fix Version/s: 1.7.2
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      portal portlet liferay
    • Workaround Exists:
      Yes
    • Workaround Description:
      Hide
      By applying a custom style, you can get the z-index high enough to render the list above the other portlets.

      In your component (in this case autocomplete) you give the main component your class name:

                      <ice:selectInputText id="location"
                                           rows="#{citySelect.cityListLength}"
                                           width="300"
                                           value="#{citySelect.selectedCityValue}"
                                           valueChangeListener="#{citySelect.selectInputValueChanged}"
                                           styleClass="autoComplete">

      Then in your style sheet, you can give the list a new z-index (notice the suffixing that ICEfaces will apply to the menu):

      .autoCompleteList {
          z-index: 1000;
      }

      Note: The exact names of the styles may depend on which component you are using. Also not that the workaround doesn't seem to work with the footer component at the very bottom of the Liferay portal page.
      Show
      By applying a custom style, you can get the z-index high enough to render the list above the other portlets. In your component (in this case autocomplete) you give the main component your class name:                 <ice:selectInputText id="location"                                      rows="#{citySelect.cityListLength}"                                      width="300"                                      value="#{citySelect.selectedCityValue}"                                      valueChangeListener="#{citySelect.selectInputValueChanged}"                                      styleClass="autoComplete"> Then in your style sheet, you can give the list a new z-index (notice the suffixing that ICEfaces will apply to the menu): .autoCompleteList {     z-index: 1000; } Note: The exact names of the styles may depend on which component you are using. Also not that the workaround doesn't seem to work with the footer component at the very bottom of the Liferay portal page.

      Description

      When logged into Liferay (doesn't seem to happen in "guest" mode), the menu portions of some of our components get rendered underneath other portlets on the page. I've attached screen snaps to show

      1) the issue
      2) where I've applied a custom style to the menu portion (the autocomplete list) to get it to render above the other portlet containers

        Activity

        Deryk Sinotte created issue -
        Hide
        Deryk Sinotte added a comment -

        Shows autocomplete component drop down rendering underneath other portlet container.

        Show
        Deryk Sinotte added a comment - Shows autocomplete component drop down rendering underneath other portlet container.
        Deryk Sinotte made changes -
        Field Original Value New Value
        Attachment autocomplete without z-index.png [ 11156 ]
        Hide
        Deryk Sinotte added a comment -

        Shows autocomplete drop down with custom z-index style applied.

        Show
        Deryk Sinotte added a comment - Shows autocomplete drop down with custom z-index style applied.
        Deryk Sinotte made changes -
        Attachment autocomplete with z-index 1000.png [ 11157 ]
        Hide
        Deryk Sinotte added a comment -

        Autocomplete dropdown with z-index set to 1000

        Show
        Deryk Sinotte added a comment - Autocomplete dropdown with z-index set to 1000
        Deryk Sinotte made changes -
        Attachment autocomplete with z-index.png [ 11158 ]
        Hide
        Deryk Sinotte added a comment -

        The first attached picture is mis-labeled. Instead of autocomplete with z-index 1000.png, it's another shot of the problem.

        Show
        Deryk Sinotte added a comment - The first attached picture is mis-labeled. Instead of autocomplete with z-index 1000.png, it's another shot of the problem.
        Hide
        Ken Fyten added a comment -

        Seems like the renderer should be applying the z-index to the list content as well as the popup div, etc.

        Show
        Ken Fyten added a comment - Seems like the renderer should be applying the z-index to the list content as well as the popup div, etc.
        Ken Fyten made changes -
        Fix Version/s 1.7.2 [ 10130 ]
        Assignee Priority P2
        Assignee Yip Ng [ yip.ng ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #17480 Tue Sep 02 15:30:35 MDT 2008 yip.ng ICE-3390
        Set z-index of autocomplete popup list to a high value.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/xp/xp-portlet.css
        Commit graph MODIFY /icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/rime/rime-portlet.css
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #17481 Tue Sep 02 15:31:54 MDT 2008 yip.ng ICE-3390
        Set z-index of autocomplete popup list to a high value.
        Files Changed
        Commit graph MODIFY /icefaces/branches/icefaces-1.7/icefaces/core/src/com/icesoft/faces/resources/css/rime/rime-portlet.css
        Commit graph MODIFY /icefaces/branches/icefaces-1.7/icefaces/core/src/com/icesoft/faces/resources/css/xp/xp-portlet.css
        made changes -
        Attachment screenshot-1.jpg [ 11215 ]
        Hide
        yip.ng added a comment -

        There are actually two problems in this case. One is the z-index of the popup div, which affects both IE and Firefox. This has been fixed. See screenshot-1. The other problem is the same as in ICE-3329, which affects only IE. See ICE-3329 for more.

        Show
        yip.ng added a comment - There are actually two problems in this case. One is the z-index of the popup div, which affects both IE and Firefox. This has been fixed. See screenshot-1. The other problem is the same as in ICE-3329 , which affects only IE. See ICE-3329 for more.
        yip.ng made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Fix Version/s 1.7.2RC1 [ 10140 ]
        Fix Version/s 1.7.2 [ 10130 ]
        Hide
        Joanne Bai added a comment -

        Tested successfully for Liferay 5.1 + Tomcat 6 on Trunk revision #17507

        Show
        Joanne Bai added a comment - Tested successfully for Liferay 5.1 + Tomcat 6 on Trunk revision #17507
        Tyler Johnson made changes -
        Ken Fyten made changes -
        Fix Version/s 1.7.2 [ 10130 ]
        Fix Version/s 1.7.2RC1 [ 10140 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Priority P2
        Assignee Yip Ng [ yip.ng ]

          People

          • Assignee:
            Unassigned
            Reporter:
            Deryk Sinotte
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: