Greetings - is there a way to adjust the 'height' or 'min-height' attribute of an iframe when using the embed block? When I try inserting a height attribute into the iframe source, the iframe expands to fit the entire height of the page.
I also tried appending the height declaration with px, even though this is not in the html spec (but it is observed in the following Rise article). Both of these resulted in the iframe running off the length of the page vertically (see attachment).
Second, I tried css style attributes. CSS styling would be my preferred method:
The last thing I discovered is that these properties do not control the size of the frame in a traditional 'absolute pixel value' sense. They seem to define a fixed aspect ratio to responsively render the iframe. So using height="1" with="1" renders the same as height="400" with="400".
Using the last iframe code you shared, did you try adjusting the Embed Width setting? It looks like you were using the Full Width setting in your screenshot, which scales up the iframe to fill the width of the container.
Hi Alyssa, i got a similar situation here. Is there a way to make the embed width smaller than the highlighted "Small" option? Or maybe fit to the code?
I'm trying to embed a custom code snippet (using bold text to highlight) in Rise but i can't seem to make it work. Thought of images already but learners need to copy/paste text on system terminal in order to make it work. Can you help please?
Tried using this tool, none of the Embedly really helped up until now.
I embedded a question in rise 360 and when I modified the size in the iframe I have to leave a greater height that I want to (which shows a lot of unwanted white space on the computer view), so that the phone view shows all the options of the question (see attachment). Is there a way to get all the options of the question in both views without having to add so much white space in the computer view?
As you will see in the code, we don't want to see the scrolling bar because it is distracting for just one simple question.
This is why having control over the responsiveness of the different screen sizes would be useful. I know one of the appeals of Rise is that it works without having to worry about responsiveness. However, the lack of customization on responsiveness by the end user leads to unexpected results.
Hi folks, thanks for letting us know about this issue. We have this documented as a possible bug, and we'll let you know here once we have updates. Hang tight!
Hi there, Kayla. No updates on this from the Rise 360 side. The workaround for now is to experiment with the height and width attributes until you find a combination that displays best.
Staff here are incorrect. Width and Height are not attributes supported in the embed block with iframes. Hope this helps folks being given the run around.
11 Replies
Hi Scott,
Can you post the iframe code here for us to look at?
Hi Karl, thanks for your reply. I think I discovered the answer right after hitting send.
First, I tried entering only a height declaration only using iframe height attribute:
I also tried appending the height declaration with px, even though this is not in the html spec (but it is observed in the following Rise article). Both of these resulted in the iframe running off the length of the page vertically (see attachment).
Second, I tried css style attributes. CSS styling would be my preferred method:
This resulted in the style code being ignored and removed from the iframe markup.
Finally, I was successful when using both height and width iframe attributes:
The last thing I discovered is that these properties do not control the size of the frame in a traditional 'absolute pixel value' sense. They seem to define a fixed aspect ratio to responsively render the iframe. So using height="1" with="1" renders the same as height="400" with="400".
Thanks!
Hi Scott!
Using the last iframe code you shared, did you try adjusting the Embed Width setting? It looks like you were using the Full Width setting in your screenshot, which scales up the iframe to fill the width of the container.
Hi Alyssa, i got a similar situation here. Is there a way to make the embed width smaller than the highlighted "Small" option? Or maybe fit to the code?
I'm trying to embed a custom code snippet (using bold text to highlight) in Rise but i can't seem to make it work. Thought of images already but learners need to copy/paste text on system terminal in order to make it work. Can you help please?
Tried using this tool, none of the Embedly really helped up until now.
Thanks in advance!
Hi Jhonatan, we played around with the embed code and found one that might work. Here is the code:
<iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=auto&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=false&pv=19px&ph=56px&ln=false&fl=1&fm=Hack&fs=13.5px&lh=133%25&si=false&es=2x&wm=false&code=%253C%21DOCTYPE%2520html%253E%250A%253Chtml%2520lang%253D%2522en%2522%253E%250A%2509%253Chead%253E%250A%2509%2509%253Cmeta%2520charset%253D%2522utf-8%2522%253E%250A%2509%2509%253Ctitle%253Etitle%253C%252Ftitle%253E%250A%2509%2509%253Clink%2520rel%253D%2522stylesheet%2522%2520href%253D%2522style.css%2522%253E%250A%2509%2509%253Cscript%2520src%253D%2522script.js%2522%253E%253C%252Fscript%253E%250A%2509%253C%252Fhead%253E%250A%2509%253Cbody%253E%250A%2509%2509%253C%21--%2520page%2520content%2520--%253E%250A%2509%253C%252Fbody%253E%250A%253C%252Fhtml%253E" height=150px width=500px></iframe>
I hope that helps!
Hi,
I embedded a question in rise 360 and when I modified the size in the iframe I have to leave a greater height that I want to (which shows a lot of unwanted white space on the computer view), so that the phone view shows all the options of the question (see attachment). Is there a way to get all the options of the question in both views without having to add so much white space in the computer view?
As you will see in the code, we don't want to see the scrolling bar because it is distracting for just one simple question.
Here is the code that I am using:
<iframe src="https://ufl.qualtrics.com/jfe/form/SV_daN44sV8shM3noO" height="1" width="1.5" scrolling="no"></iframe>
This is why having control over the responsiveness of the different screen sizes would be useful. I know one of the appeals of Rise is that it works without having to worry about responsiveness. However, the lack of customization on responsiveness by the end user leads to unexpected results.
Hi folks, thanks for letting us know about this issue. We have this documented as a possible bug, and we'll let you know here once we have updates. Hang tight!
Checking in to see if Articulate has any updates on this? See the comment from Lea from 4 months ago and eager for a solution too! Thanks!
Hi there, Kayla. No updates on this from the Rise 360 side. The workaround for now is to experiment with the height and width attributes until you find a combination that displays best.
This post was removed by the author
Staff here are incorrect. Width and Height are not attributes supported in the embed block with iframes. Hope this helps folks being given the run around.