The Iframe is not displayed at full height even with "height=100%" in the HTML fragment

Issue

• When I embed a portlet( for example a blog portlet) through an Iframe even with the "height = 100%" the portlet will be shown in an approximately 150 px high size with a scrollbar.

Reproduction Steps:

1. Go to Content & Data --> Blogs and add a Blog entry and a new Journal article

2. Go to Site Builder --> Pages and create a content page and add to it a Blogs portlet, you could also add an asset publisher and configure it to "dynamic" (it will show the blogs entry and the article)

3. Open the configuration of the portlet and select "Sharing" then copy the code snippet. For example, it should look something like this:

   <iframe frameborder="0" height="100%" src="http://localhost:8080/widget/web/guest/test/-/blogs" width="100%"></iframe>

   (the height in the code should remain 100%) then publish the Page

4. Go to Site Builder --> Pages and add another content page and add to it an HTML fragment, then edit the fragment by pasting the previously copied code into the fragment editor then save.

Actual Result: The Blogs appear on the page but with a vertical scroll.
Expected Result: The Blogs appear on the entire page without the need of scrolling.

Environment

• Liferay DXP 7.3
• Liferay DXP 7.4

Resolution

• The current behavior is expected. It is a limitation of the product that we cannot handle since what happens is that the height="100% refers to the percentage of height to be inherited by the fragment from its parent, that we cannot control when embedded in the HTML. We can suggest a few workarounds:

  1. Giving the fragment’s height a precise value without percentage (e.g. height="1290" or height="1290px");

  2. Using custom CSS, e.g. :

     .[$FRAGMENT_CLASS$] > div { height: 100%; } .component-html { height: 100%; }

  3. Using the IFrame widget instead of the HTML fragment;

  4. Creating a custom fragment with custom HTML & CSS.

• With the last two options, we cannot provide a custom CSS or fragment as customization is not compatible with our Support. If you require assistance with customization we advise you to contact our Global Services Team (GS).