Height 100% - BUG ?

[joomleb]

Hi, PHP 7.3.22 + Joomla 3.9.21 + embed-google-docs + Helix Ultimate 1.1.2 (Botstrap 4, but it is not template related, I have back the same on Beez3 and Protostar) Setting "Height: 100%" the Google Document the Embed Google Document is shown with a small fixed height, and the awful scroll bar is shown - you can see it in action here I tested it also by adding "100vh" in the height field, but I have back the same...

Please, How to have back a 100% Width, 100% Height on embed documents ?

[petkivim]

Hi,

When you use percentage to define the height, the value is relative to the parent elements of the document. The problem is that those elements' height is something else than 100%. The easiest solution to embed the whole document without the scroll bar is to set the value of the height property in pixels based on the document length. For example, height:500 sets height to 500px.

Thanks, Petteri

[joomleb]

Hi Petteri, Many Thanks for your reply. "...The easiest solution to embed the whole document without the scroll bar is to set the value of the height property in pixels based on the document length..." = It cannot be a solution because it is not responsive, fixing the right height for desktop create the problem on mobile and vice versa. I tested also by adding "auto" into the height field, but it doesn't solve it.

The iframe embed content should be always Responsive https://getbootstrap.com/docs/4.4/utilities/embed/ https://www.aimy-extensions.com/joomla/responsive-iframes.html

By adding a CSS trick or a piece of Java Script could be a good solution https://css-tricks.com/fluid-width-video/

As far as I see your plugin does not add any CSS class embedding the content, maybe, Please, Do you have any suggestions / tricks / tips on how we can test some simple CSS solutions ?

[petkivim]

Hi,

You're right, the plugin does not add any CSS class embedding the content. You could wrap the document inside p or div element with a CSS class and adjust the style using the class, for example:

<div class="myStyle>
    {google_docs}document_url|width:100%|height:100%{/google_docs}
</div>

Best regards, Petteri