Overview

After adding the min-h-screen class to a component, the IFrame height is not rendered correctly, causing display issues in the preview or saved component.

Steps to reproduce:

  1. Add the class min-h-screen to a component.
  2. Preview or save the component.

Proposed resolution

User interface changes

CommentFileSizeAuthor
Screenshot 2025-07-30 at 4.53.42 PM.png64.15 KBmayur-sose

Issue fork experience_builder-3538809

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

mayur-sose created an issue. See original summary.

jessebaker’s picture

jessebaker commented
Component: … to be triaged » User interface
Assigned: Unassigned » jessebaker

jessebaker opened merge request !1390

jessebaker’s picture

jessebaker commented
Assigned: jessebaker » Unassigned
Status: Active » Needs work

So further testing of my MR suggests this works but only if the element's actual height is lower than or equal to the min-height.

If you have an element with min-height: 100vh but then put enough text content into the element that it becomes taller than the screen height, then the iframe goes back to expanding forever.

I think the reason is that the element size is not increasing by the same ratio as the screen height (because at a certain point the min-height takes over, but not at all resolutions)

jessebaker’s picture

jessebaker commented
Related issues: +#3544531: 100% height on body or html element breaks viewport height calculation
jessebaker’s picture

jessebaker commented
Project: Experience Builder » Drupal Canvas