ICEfaces
  1. ICEfaces
  2. ICE-3294

Portlet: submenu inside scrollable div doesn't render correctly

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Invalid
    • Affects Version/s: 1.7.1
    • Fix Version/s: 1.8RC1, 1.8
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      ANY

      Description

      If putting a menubar inside a scrollable div, it seems that the submenu renders its position regardless of the position of the parent menu. see attached screenshot.
      1. ScreenHunter_02 Feb. 11 15.41.jpg
        162 kB
      2. screenshot-1.jpg
        170 kB
      3. screenshot-2.jpg
        136 kB
      4. screenshot-3.jpg
        122 kB
      5. screenshot-4.jpg
        180 kB
      6. screenshot-5.jpg
        116 kB
      7. tooltip_scrollable_div.jpg
        20 kB

        Activity

        Hide
        yip.ng added a comment -

        Can't reproduce problem. See screenshot-1. Maybe the cause is not the scrollable div, but the portlet environment? Need to investigate it further in a portlet environment.

        Show
        yip.ng added a comment - Can't reproduce problem. See screenshot-1. Maybe the cause is not the scrollable div, but the portlet environment? Need to investigate it further in a portlet environment.
        Hide
        yip.ng added a comment -

        Can't reproduce problem in the portlet environment either. See screenshot-2. Should ask user to provide a sample app. with the problem.

        Show
        yip.ng added a comment - Can't reproduce problem in the portlet environment either. See screenshot-2. Should ask user to provide a sample app. with the problem.
        Hide
        Sam Xiao added a comment -

        I guess the real problem is when the scrollable div has smaller height like the one in the screenshot I attached, then the menu bar is rendered regardless of relative position. This is not a problem when this item has the same relative and absolute position.

        Show
        Sam Xiao added a comment - I guess the real problem is when the scrollable div has smaller height like the one in the screenshot I attached, then the menu bar is rendered regardless of relative position. This is not a problem when this item has the same relative and absolute position.
        Hide
        yip.ng added a comment -

        As can be seen in screenshot-3, still can't reproduce problem after making the div height much smaller. Really need a sample app. from the user to proceed any further.

        Attached a portlets war file: c-s-portlets.war. You can run it to see if the problem shows up on your machine. Use liferay-portal-tomcat-6.0-4.4.2 and run the tree portlet.

        Show
        yip.ng added a comment - As can be seen in screenshot-3, still can't reproduce problem after making the div height much smaller. Really need a sample app. from the user to proceed any further. Attached a portlets war file: c-s-portlets.war. You can run it to see if the problem shows up on your machine. Use liferay-portal-tomcat-6.0-4.4.2 and run the tree portlet.
        Hide
        Ken Fyten added a comment -

        We need a succinct test case that reproduces this problem before it can be pursued further.

        Show
        Ken Fyten added a comment - We need a succinct test case that reproduces this problem before it can be pursued further.
        Hide
        Tyler Johnson added a comment -

        Test case intended for Liferay 4.4.1

        Show
        Tyler Johnson added a comment - Test case intended for Liferay 4.4.1
        Hide
        yip.ng added a comment -

        Can't deploy the test app. successfully. See screenshot-4 for the errors.

        Show
        yip.ng added a comment - Can't deploy the test app. successfully. See screenshot-4 for the errors.
        Hide
        yip.ng added a comment -

        Had to merge code into component showcase portlets. Portlets then deployed successfully and problem was reproduced. See screenshot-5.

        Show
        yip.ng added a comment - Had to merge code into component showcase portlets. Portlets then deployed successfully and problem was reproduced. See screenshot-5.
        Hide
        Ken Fyten added a comment -

        Yip,

        Does the menu positioning fix for ICE-3620 resolve this issue also? Please confirm.

        Show
        Ken Fyten added a comment - Yip, Does the menu positioning fix for ICE-3620 resolve this issue also? Please confirm.
        Hide
        yip.ng added a comment -

        Nothing to do with component rendering. Caused by CSS in the complicated layout (menu within table within tree) and portlet environment. One improvement I came up with looks like this:

        <ice:portlet>
        <ice:outputStyle href="/xmlhttp/css/rime/rime-portlet.css"/>
        <ice:outputStyle href="./css/showcase_style.css"/>
        <style>
        .portlet-menu-cascade-item

        { width: 160px; height: 10px; }

        </style>
        <ice:form id="treeform">
        <!-- rest same as in the sample app. source -->
        </ice:form>
        </ice:portlet>

        See the attached screeshot for the results.

        Show
        yip.ng added a comment - Nothing to do with component rendering. Caused by CSS in the complicated layout (menu within table within tree) and portlet environment. One improvement I came up with looks like this: <ice:portlet> <ice:outputStyle href="/xmlhttp/css/rime/rime-portlet.css"/> <ice:outputStyle href="./css/showcase_style.css"/> <style> .portlet-menu-cascade-item { width: 160px; height: 10px; } </style> <ice:form id="treeform"> <!-- rest same as in the sample app. source --> </ice:form> </ice:portlet> See the attached screeshot for the results.

          People

          • Assignee:
            Unassigned
            Reporter:
            Sam Xiao
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: