Overview

As an example the SDC component experience_builder/tests/modules/xb_test_sdc/components/props-slots/props-slots.twig has a height of 100vh specified.

The preview iFrame's height is matched to the height of the content. The use of VH means that component will try and be the height of the iFrame. The combo of these two things leads to an infinite loop of the iFrame expanding to contain the component and then the component expanding to match the height of the iFrame.

Proposed resolution

There is already a half-solution in place to catch this but it's not working. ui/src/hooks/useSyncIframeHeightToContent.ts:64

  1. The code has a bug that checks element instanceof HTMLElement which is a) unnecessary and also b) not truthy which skips the actual vh check
  2. The check for vh will only work for inline styles. element.style.height does not return a value if the height is specified in a separate stylesheet.

    So as a first step, removing the element instanceof HTMLElement from the if statement will get this partially working.

    User interface changes

CommentFileSizeAuthor
#7 xb-infinite-scroll.mp4111.78 KBheyyo

Issue fork experience_builder-3518708

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jessebaker created an issue. See original summary.

jessebaker opened merge request !883

jessebaker’s picture

jessebaker commented

The MR !883 should fix the issue for inline vh units.

I’m not sure what the solution for elements with vh units set in a separate stylesheet would look like. To access the style with JS means calling getComputedStyle() but that always returns the height in px regardless of what unit was specified. Perhaps some kind of rate limit on the iframe height check? Perhaps parsing stylesheets before the page is rendered somehow?

jessebaker’s picture

jessebaker commented
Title: Components with heigh in VH can cause the preview iFrame to expand infinitely in height » Components with height in VH can cause the preview iFrame to expand infinitely in height

  • jessebaker committed bafaf272 on 0.x 
    Issue #3518708 by jessebaker: Components with height in VH can cause the...
nagwani’s picture

nagwani commented
Issue tags: +beta target
heyyo’s picture

heyyo commented
StatusFileSize
new xb-infinite-scroll.mp4111.78 KB

I experienced the same bug, just by setting margin-top, or margin-block (but not margin-bottom).
Video attached.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

@heyyo is that against 0.x? Can you share that SDC (or point me towards somewhere it lives in a repo)?

@jessebaker this was merged is 'Active' the correct status?

heyyo’s picture

heyyo commented

Yes my test was against 0.x, but after I saw another issue on the same bug, didn't test it yet.
https://www.drupal.org/project/experience_builder/issues/3534490

Can you share that SDC (or point me towards somewhere it lives in a repo)?

It's a local playground for now, still unsure to contribute.
But it's a custom theme with daisyui/tailwind, and this bug appears just by applying the tailwind class mt-{y} or my-{y}
which sets only margin-top or margin-block, nothing related to height of the container.
I didn't test outside tailwind, to see we have the same issue

heyyo’s picture

heyyo commented

I confirm, that margin-top/margin-block issue is fixed with the other issue:
https://www.drupal.org/project/experience_builder/issues/3534490

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Active » Closed (duplicate)

This is getting fixed in #3534490: Cannot use `h-screen` from Tailwind with XB