Displaying a Pdf in a fullscreen mode in qualtrics | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

Displaying a Pdf in a fullscreen mode in qualtrics

  • April 17, 2024
  • 5 replies
  • 135 views
S
Forum|alt.badge.img+1

Hello, 

I have been able to embed a PDF in Qualtrics. However it is not being shown as fullscreen. I tried all possible styling solution in the HTML code but still it does not help. 

 

Here is my code

I also tried this but I still do not see the pdf stretched across screen 

<iframe height="100%" width="100%" id="pdfContent" src="https://fiu.qualtrics.com/CP/File.php?F=F_ggfg" frameborder="0" allowfullscreen></iframe></div>

 

I also tried - <iframe src="PDF Link + #toolbar=0" height="100%" width="100%"></iframe> 

 

Best answer by ahmedA

You need to use css to increase the height/width beyond the parent elements dimensions.

<iframe id="pdfContent" src="PDF-URL" frameborder="0" allowfullscreen></iframe>
<style>
	#pdfContent {
		height: 100vh;
		width: 100vw;
	}
</style>

 

Alternatively, you can use this JS to request a real fullscreen view:

Qualtrics.SurveyEngine.addOnReady(function () {
		document.querySelector("#pdfContent").requestFullscreen();
	});

Press Esc or F11 to exit fullscreen.

View original

5 replies

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • 2031 replies
  • Answer
  • April 17, 2024

You need to use css to increase the height/width beyond the parent elements dimensions.

<iframe id="pdfContent" src="PDF-URL" frameborder="0" allowfullscreen></iframe>
<style>
	#pdfContent {
		height: 100vh;
		width: 100vw;
	}
</style>

 

Alternatively, you can use this JS to request a real fullscreen view:

Qualtrics.SurveyEngine.addOnReady(function () {
		document.querySelector("#pdfContent").requestFullscreen();
	});

Press Esc or F11 to exit fullscreen.

AlonsoC
1 person likes this
  • AlonsoC
    AlonsoC
S
Forum|alt.badge.img+1

@ahmedA - It works ! Thanks much you are a life saver !

S
Forum|alt.badge.img+1

I need one more help. Is there a way to remove the scroll bar from the pdf. I tried #toolbar=0 but it did not work. 

 

Also for second solution of JS, where shall I put that script?

S
Forum|alt.badge.img+1

@ahmedA - I need one more help. Is there a way to remove the scroll bar from the pdf which is displayed in the qualtrics. I tried #toolbar=0 but it did not work. 

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • 2031 replies
  • April 19, 2024

I don’t think that will be possible using your default pdf embeds. You’ll probably need a use an external library like PDF.js or adobe pdf.

 

Leave a Reply


Terms & Conditions