Uploaded image for project: 'eZ Platform Enterprise Edition'
  1. eZ Platform Enterprise Edition
  2. EZEE-2173

[Page Builder] Block toolbar is hidden when the previous element has higher z-index

    XMLWordPrintable

Details

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: High High
    • Customer request
    • 2.2.0
    • Page Builder
    • None

    Description

      Currently, in the Page Builder in edit mode, when the element above the first block of the Landing Page has a-index higher than 1000, then this block's toolbar is hidden under that element.
      For example, Bootstrap (https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css) has elements with z-index 1030 or higher, which causes problems.
      Symfony Toolbar uses z-index 99999 to avoid similar issues, so that is probably the way to fix that issue.
      The fix for this issue might will probably also fix related issue: EZEE-2172.

      Steps to reproduce:

      1. Create a new eZ Platform EE installation.
      2. Add the following configuration to app/config/ezplatform.yml:
        Unable to find source-code formatter for language: yml. Available languages are: actionscript, ada, applescript, bash, c, c#, c++, cpp, css, erlang, go, groovy, haskell, html, java, javascript, js, json, lua, none, nyan, objc, perl, php, python, r, rainbow, ruby, scala, sh, sql, swift, visualbasic, xml, yaml
        ezpublish:
            system:
                site_group:
                    content_view:
                        full:
                            landing_page:
                                template: 'full/landing_page.html.twig'
                                match:
                                    Identifier\ContentType: 'landing_page'
        
      3. Create file app/Resources/views/full/landing_page.html.twig with the following content:
        Unable to find source-code formatter for language: twig. Available languages are: actionscript, ada, applescript, bash, c, c#, c++, cpp, css, erlang, go, groovy, haskell, html, java, javascript, js, json, lua, none, nyan, objc, perl, php, python, r, rainbow, ruby, scala, sh, sql, swift, visualbasic, xml, yaml
        {% extends noLayout == true ? viewbaseLayout : pagelayout %}
        {% block content %}
            <nav style="position: relative; top: 0; right: 0; left: 0; z-index: 1030; padding-top: 12px; padding-bottom: 12px; background-color: #fff">
                NAVBAR
            </nav>
            {{ ez_render_field(content, 'page') }}
        {% endblock %}
        
      4. In Admin UI, navigate to "Page" tab and enter the edit mode for the Home content. Notice that the toolbar for the first block is hidden. It should show when you hover over the block.

      Attachments

        Activity

          People

            Unassigned Unassigned
            jacek.foremski-obsolete@ez.no Jacek Foremski (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: