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

        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.
        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.
        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
        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.
        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.
        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

          People

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

            Dates

            • Created:
              Updated:
              Resolved: