AnsweredAssumed Answered

Embedded pdf preview is too narrow when used in a table or div

Question asked by Richard Stern on Jan 22, 2019

Hi all,

 

I'm trying to layout our pages so that we have a set of links to pdfs that are left justified but in a central part of the page, like this:

The problem is that when we click the little preview button next to "TEST TEST TEST" the pdf previewer is being constrained by the divs used to align the text and appears really narrow.

 

 

I tried using tables as an alternative way to lay this out but it has the same problem.

 

This is the html I have:

 

<div style="text-align: center;">
     <hr style="height: 1px; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; border: none; color: #00ccff; background-color: #00ccff;" />

     <div style="display: inline-block; text-align: left;">
          <a class="instructure_file_link instructure_scribd_file" title="Exercise - Introduction to Programming.pdf" href="https://aie.test.instructure.com/courses/9/files/77547/download?wrap=1" data-api-endpoint="https://aie.test.instructure.com/api/v1/courses/9/files/77547" data-api-returntype="File">TEST TEST TEST</a><br />
          
          <a class="instructure_file_link instructure_scribd_file" title="Tutorial - Introduction to Programming pt 1.pdf" href="https://aie.test.instructure.com/courses/9/files/77550/download?wrap=1" data-api-endpoint="https://aie.test.instructure.com/api/v1/courses/9/files/77550" data-api-returntype="File">TEST TEST</a><br />
          
          <a class="instructure_file_link instructure_scribd_file" title="Tutorial - Introduction to Programming pt 2.pdf" href="https://aie.test.instructure.com/courses/9/files/80046/download?wrap=1" data-api-endpoint="https://aie.test.instructure.com/api/v1/courses/9/files/80046" data-api-returntype="File">TEST TEST TEST TEST</a>     
     </div>
     
     <hr style="height: 1px; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; border: none; color: #00ccff; background-color: #00ccff;" />
</div>

 

Does anyone know of a way to either:

1. Force the preview to be larger

2. Lay out text in a way that keeps this look but doesn't constrain the preview

3. Opens the preview in a separate tab when clicked

Or have any other ideas...

 

Our restrictions are: must keep this layout, student's must be able to view the pdf without downloading, and we can't use google drive or other 3rd party sites, the pdfs have to be hosted on canvas due to company policy.

 

Any ideas?

Outcomes