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

PageBuilder's iframe CSS display value prevents 3rd party JS plugins from correct window size measurement

    XMLWordPrintable

Details

    Description

      The customer uses 3rd party JS plugins. One of them tries to measure window width to set proper with of slider's element. It tries to do so on jQuery's $(document).ready() event, but in that time iframe's display value is still set to none. Therefore window.outerWidth (as well as outerHeight is set to 0. The side effect is, that 3rd party plugin sets elements size to 0px what breaks customer's blocks.

      Steps to reproduce
      There is no easy way to do so. The simplified way is to:

      1. Create own block
      2. In the block template add the following JS snippet:
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        <script>
        $(document).ready(function (e) {
          console.log($(window).width());
        });
        </script>
        
      3. Create a LandingPage
      4. Add the new block of previously created type
      5. Go to preview mode
      6. You should see the proper width in the browser's console
      7. Go to edit mode
      8. You should see 0 width in the browser's console

      Proposed solution:
      Since iframe is below spinner's layer, it's display CSS property can be easily changed to block.

      Attachments

        Activity

          People

            Unassigned Unassigned
            kamil.madejski@ibexa.co Kamil Madejski
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: