Displaying a Pdf in a fullscreen mode in qualtrics | XM Community
Solved

Displaying a Pdf in a fullscreen mode in qualtrics

  • 17 April 2024
  • 5 replies
  • 32 views
S
Badge +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> 

 

icon

Best answer by ahmedA 17 April 2024, 22:49

View original

5 replies

A
Rank
Userlevel 7
Badge +21

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.

S
Badge +1

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

S
Badge +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
Badge +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
Rank
Userlevel 7
Badge +21

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