How do I get "Height=100%" working on an embed code in the Instructions field for Assignments?
Specifically, in the Instructions field for Assignments.
It gives me a tiny height viewport, but the "Width" tag appears to work.
If I manually set the height, to say, 1500px, it works fine, but I'd like it to do it automatically, in case the content changes later.
Code Example:
<object type="text/html" height="100%" width="100%" data="http://www.colorado.edu"> </object>
Answers
-
Hey @Jeremy Virgo ,
I wanted to test around a bit and see if I can get anything around here working...I was able to get our HTML editor to accept a 100% height value by specifying a style tag as so:
<div style="height: 100%;">
<p>Hello world!</p>
</div>
I saved that and looked at the HTML DOM that was rendered and saw this it retained: (see screenshot)
Now the issue I found was that even with a 100% height value, the viewport didnt actually expand any larger. So then I updated my code to match a static px value:
<div style="height: 1200px;">
<p>Hello world!</p>
</div>
Saving that and having another look, I found this time the viewport was expanded as you had mentioned in would (see next comment, second screenshot)
So having test and said all of that, here is what I am seeing:
- With relative values (%), the viewport will not be expanded unless there is actually content inside in elements that require the view to be expanded
- If you want to get height via % working that's no problem. But your viewport will only expand larger if there is content that requires the height to grow beyond the default value. % is relative and will only grows to 100% if the content inside it needs that much space. It can grow up to 100%, but wont take up the full 100% if it doesn't need that much space
- Specifying a px value will force the full space to grow to that exact size. That is because a px entry denotes you want exactly that much space, regardless of whether it is used
Hope that helps clarify what you are seeing with your code
-
Here is my other screenshot....
-
Hi Jordan,
That's funny, because I just can't get it to display bigger, and there is definately content there.
I've tried iFrames and the embed code.
-
If you have any ideas, I'm happy to hear them!
-
I still haven't figured out a way to do it.
The only things that seem to work are setting hard limits, and the embedded page has buttons that change it's total height.
-
In order for iframes to achieve 100% height, their parent element needs to be set to 100%. The default height for iframes is 150px, so that's why it looks so small when you tried to set the percentage in the iframe itself with no parent element.
It's best to use CSS to achieve responsive iframes: https://www.benmarshall.me/responsive-iframes/ (Personally, I use Bootstrap's embed-responsive class.)
