How do I auto resize I-Frame height for different desktop monitor sizes? | XM Community
Question

How do I auto resize I-Frame height for different desktop monitor sizes?

  • 26 October 2020
  • 0 replies
  • 37 views

Hello,
I have created an IFrame into my Qualtrics questionnaire using the following code:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#Header").html('');
this.getQuestionContainer().hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
$('NextButton').hide();
setTimeout(function() { jQuery("#NextButton").show(); },5000);
});
Qualtrics.SurveyEngine.addOnUnload(function()
{

});

I also added this bit in the Custom CSS Look and Feel section:
.Skin .SkinInner {
width:900px;
}
@media screen and (min-width: 600px) {
}

As of yet, the IFrame is showing perfectly in the questionnaire, as long as you have a monitor larger than 20". If, for instance, a participant is using a laptop with a monitor smaller than 20", a scrolling bar appears on the right-hand side of the Iframe, which I don't want... I'd rather have the scrolling bar on the right-hand side of the questionnaire itself (not the Iframe).
What I have tried so far without success:

  • Changing "height:50vh" to "height:100%" (doesn't work)

  • With "height:100%", the Iframe becomes even smaller than with "height:50vh".

  • Adding this bit of code in the Custom CSS section (doesn't work):

html {
height: auto !important;
}

Does anyone know what I can do to fix my issue?
Thank you!


0 replies

Be the first to reply!

Leave a Reply