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!