|Discussion

Ben's tips: Making the document viewer taller

Community Discussions

Published

January 5, 2021

| 1,036 views

| 5 followers

Published

January 5, 2021

1,036

Offline

Benjamin Kahn

I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.

The Igloo Document Viewer

The Igloo document viewer is used to display PDF and Office documents. It suffers from a number of problems and limitations, but the biggest issue I get asked about is the default small size. Here's an example of a document being previewed:

noname_1609876416436

There are a number of ways to fix this inside a Folder channel, but when users try to embed a document on a page, the size is fixed.

The document above produced code similar to this when clicking on the embed link:

<iframe src="//example.igloo.com/embed.media?data=9712f715-5320-4897-b856-8ebce3add27d" width="100%" height="525" frameborder="0" allowfullscreen ></iframe>

Simply insert this code into an HTML widget, and the document appears on the page.

It looks straightforward to increase the height of the frame, right? Just increase the 525 number! But it doesn't work; you'll get a bigger space for the document on the page, but the same small viewer.

So what can be done? The problem is that flexpaper, the widget Igloo is using to display the PDF document, is hardcoding the small size in the code. The second problem is that we can't use CSS code to change the size because the CSS of a document can't change the CSS inside an iframe.

The solution is to insert Javascript into the HTML widget. First, add the class "pdfresizer" to your HTML widget.

noname_1609876480550

Then insert this at the end of the source code to your HTML block:

<script>
jQuery('.pdfresize iframe').each(function(i, frame) {
  frame.addEventListener("load", ev => {
    let new_style_element = document.createElement("style");
    new_style_element.textContent = ".flexpaper_viewer_container { height: " + 
       ev.target.contentDocument.getSize().y + 
       "px !important; } .js-flashpaper,.flexpaper_pages {height: " + 
       (ev.target.contentDocument.getSize().y - 62) + 
       "px !important;}";
    ev.target.contentDocument.head.appendChild(new_style_element);
  })
});
</script>

This code will find all the iframes on the page inside a widget with a class of pdfresize, wait until they are finished loading, and then reach inside and edit the hard-coded sizes to make the appropriate change. The full example looks like this:

noname_1609876416525

<iframe src="//example.igloo.com/embed.media?data=9712f715-5320-4897-b856-8ebce3add27d" width="100%" height="800" frameborder="0" allowfullscreen ></iframe>
<script type="text/javascript">
   jQuery('.pdfresize iframe').each(function(i, frame) {
     frame.addEventListener("load", ev => {
        let new_style_element = document.createElement("style");
        new_style_element.textContent = ".flexpaper_viewer_container { height: " +
             ev.target.contentDocument.getSize().y + 
             "px !important; } .js-flashpaper,.flexpaper_pages {height: " + 
             (ev.target.contentDocument.getSize().y - 62) + "px !important;}";
        ev.target.contentDocument.head.appendChild(new_style_element);
     })
  });
</script>

I hope this helps someone!

Ben's tips: Making the document viewer taller

The Igloo Document Viewer

0 Conclusions

Comments (23)

Related Content (1)

23 Replies