Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-81415

If a fragment has an editable field near the top of the fragment, a user cannot map or edit those fields because the buttons to do so will be blocked

    Details

      Description

      Description
      fragment-entry-link-content was given overflow:hidden CSS property to prevent images from overflowing out of bounds. However, the toolbar for mapping Display Pages is trapped inside of this element regardless of its overflow value because fragment-entry-link-content is its parent and has overflow:hidden property. This causes the toolbar to be really hard to see for most elements, and even invisible in smaller elements because its position is out of the fragment-entry-link-content parent. Screenshots will show the effects of this.

      Note: Possible idea to fix would be to remove overflow:hidden from content and just have the content box to fit what it contains inside to prevent overflow

      Steps to Reproduce

      1. Navigate to Site Admin > Build > Fragments
      2. Create a lfr-editable fragment
        <lfr-editable id="test" type="text">TEST</lfr-editable>
        
      3. Navigate to Site Admin > Build > Site Pages > Display Pages
      4. Create a Display Page
      5. Add your Fragment
      6. Set Web Content Article > Basic Web Content to be the asset type to be mapped
      7. Click on the editable text of your fragment
      8. View Toolbar (FAILS)
      9. Modify CSS rule in devtools
        .fragment-entry-link-wrapper .fragment-entry-link-content {
            /* overflow: hidden;   previous rule */
            overflow: visible; /* new rule */
            position: relative;
            z-index: -1;
        }
        
      10. Don't refresh Page, try to click on editable text on fragment

      Expected Result
      Toolbar somehow visible without having to modify overflow:hidden

      Actual Result
      Toolbar only visible with overflow:hidden changed to visible

      Reproduced on:
      Tomcat 9.0.6 + MySQL 5.7
      Portal master GIT ID: b650b3d6a8d8188bff32b02b30306daa80638e69

        Attachments

          Activity

            People

            • Assignee:
              kyle.miho Kyle Miho
              Reporter:
              kyle.miho Kyle Miho
              Participants of an Issue:
              Recent user:
              Jason Pince
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Days since last comment:
                1 year, 16 weeks ago

                Packages

                Version Package
                7.1.0 Beta 3
                7.1.X
                Master