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. tooltip_scrollable_div.jpg
              20 kB
            2. screenshot-5.jpg
              116 kB
            3. screenshot-4.jpg
              180 kB
            4. screenshot-3.jpg
              122 kB
            5. screenshot-2.jpg
              136 kB
            6. screenshot-1.jpg
              170 kB
            7. ScreenHunter_02 Feb. 11 15.41.jpg
              162 kB

              Activity

              Descending order - Click to sort in ascending order
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]
              Assignee Yip Ng [ yip.ng ]
              Ken Fyten made changes -
              Fix Version/s 1.8 [ 10161 ]
              Assignee Priority P3
              yip.ng made changes -
              Status Reopened [ 4 ] Resolved [ 5 ]
              Resolution Invalid [ 6 ]
              Hide
              Permalink
              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.
              yip.ng made changes -
              Attachment ScreenHunter_02 Feb. 11 15.41.jpg [ 11518 ]
              Ken Fyten made changes -
              Salesforce Case []
              Assignee Priority P3
              Hide
              Permalink
              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.
              Ken Fyten made changes -
              Assignee Priority P2
              Hide
              Permalink
              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.
              made changes -
              Attachment screenshot-5.jpg [ 11319 ]
              Hide
              Permalink
              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.
              made changes -
              Attachment screenshot-4.jpg [ 11317 ]
              Ken Fyten made changes -
              Resolution Cannot Reproduce [ 5 ]
              Status Resolved [ 5 ] Reopened [ 4 ]
              Ken Fyten made changes -
              Fix Version/s 1.8DR#3 [ 10143 ]
              Tyler Johnson made changes -
              Attachment sample-tree-menu-portlet.war [ 11287 ]
              Hide
              Permalink
              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
              Ken Fyten made changes -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Cannot Reproduce [ 5 ]
              Hide
              Permalink
              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
              Permalink
              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.
              yip.ng made changes -
              Attachment c-s-portlets.war [ 11198 ]
              made changes -
              Attachment screenshot-3.jpg [ 11197 ]
              Hide
              Permalink
              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
              Permalink
              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.
              made changes -
              Attachment screenshot-2.jpg [ 11181 ]
              Hide
              Permalink
              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.
              made changes -
              Attachment screenshot-1.jpg [ 11180 ]
              Ken Fyten made changes -
              Assignee Priority P2
              Security Private [ 10001 ]
              Assignee Yip Ng [ yip.ng ]
              Tyler Johnson made changes -
              Support Case References https://www.icesoft.ca:4443/supportilla/show_bug.cgi?id=5005
              Sam Xiao made changes -
              Summary Portlet: tooltip inside scrollable div doesn't render correctly Portlet: submenu inside scrollable div doesn't render correctly
              Description If putting a tooltip inside a scrollable div, it seems that the tooltip renders its position regardless of the position of the attached item. see attached screenshot. 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.
              Sam Xiao made changes -
              Field Original Value New Value
              Attachment tooltip_scrollable_div.jpg [ 11112 ]
              Sam Xiao created issue -

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: