Uploaded image for project: 'PUBLIC - Liferay Portal Web Content Experience'
  1. PUBLIC - Liferay Portal Web Content Experience
  2. WCM-1399

Simulation menu in the user segment display portlet appears below other portlets



      Can't reach the simulation menu in the user segment display plugin if there is another portlet deployed under it in the same page.
      1. Add audience targeting plugin
      2. Add 3-4 User Segments in Control Panel>Configuration>Audience Targeting and give them Session Attributes that won't apply to you, e.g a Country that you're not residing in or a browser you are not using
      2. Add a user segment content display portlet to a page, along with a Web Content Display Portlet with the WCD portlet below the other
      3. Configure the user segment content display portlet to show specific content for each User Segment that you created
      4. The portlet should now say "There are no matching rules". On the user segment content display portlet, click simulation button
      5. Try to choose user segments at the bottom of the menu.
      Can click the user segments at the bottom of the list and the Simulation menu is opaque.
      The simulation menu opacity < 1 and the menu disappears when you hover towards the bottom of the list and overlap the portlet beneath it. Occurs with marketplace app and snapshot Liferay Audience Targeting-2.x-SUPPORT-SNAPSHOT-20171107-70x-fed25ac1e2781da363eb513e039d7c9ee4343075.lpkg

      As an addition test, you can select Web Content in the Web Content Display portlet and then click on the simulation menu to see that the menu falls behind the lower portlet.

      Problem: The Audience Targeting portlet appears with opacity = .5 when no content applies to the user's segment. This is standard when compared to other portlets with nothing to display such as Web Content Display. However, the simulation menu in the Audience Targeting portlet also displays with opacity = .5 AND it is not fully accessible when other portlets are below because the menu ends up behind those portlets. Increasing the z-index of the menu will never allow it to appear over other portlets; this behavior is due to Stacking Contexts which are created when a parent's opacity < 1. Details about Stacking Contexts can be found here, to summarize - children can never escape the z-index of their Stacking Context. The other factor is a child is affected by it's parent's opacity. So if parent 'A' has opacity = .5, and child 'a' has opacity = 1, child 'a' appears to the view as if opacity = .5. If child 'a' was set to have opacity = .5, then it would appear as if opacity was .25. Because of this, if the menu is a child of the portlet, it will never be able to have an effective opacity of 1 as long as the portlet opacity < 1. See this.

      Fixes not accepted by the SME here:

      1. Have Audience Targeting appear with opacity = 1 at all times, or at least as long some content is configured to be displayed inside the Simulation Menu. Problem: breaks with the expected behavior.
      2. Allow the Simulation Menu appear with effective opacity of .5 and find how to change the Stacking Context created by the portlet to appear above other portlets while the menu is in use. Problem: Again breaks with the expected fix, also while it seems possible to change the z-index of the parent, the limited tested I did in this direction was not able to accomplish it for some unknown reason.
      3. Make the menu not a child of the portlet. This is accomplished elsewhere as liferay:icon-menu and can be found on the topper of each portlet. The menu is created separate from the portlet is not effected by the portlet's opacity. Problem: liferay:icon-menu is the only pre-built functionality I know of and does not have all the capabilities of the current menu; specifically the Edit button on each row could not be implemented. An extension of liferay:icons would be necessary to allow additional functionality which seems excessively complicated in respect the scope of this issue.

      Can't test in master (missing requirement com.liferay.product.navigation.control.menu.dxp.theme.contributor)




            joshua.cords Joshua Cords
            joshua.cords Joshua Cords
            Participants of an Issue:
            0 Vote for this issue
            0 Start watching this issue




                Version Package