Does anyone know if there is a global CSS change that will make the Box document preview taller?

Jump to solution
mlattke
Instructure
Instructure

My teachers like to post PowerPoints or PDF files and get frustrated when students only see part of a file, so they end up taking a screenshot of the documents and pasting in an image instead so they can display the whole document on the page.  This, of course, makes the content totally not accessible.  I tried mucking around with Inspect Element in my browser to see if I could figure out what style or ID controlled the height of the Box preview tool, but I couldn't figure it out.  I was hoping to get a snippet of CSS or Javascript to throw in my global branding files that would make the preview boxes double the height they are now.  Anyone have any ideas on this one?

To give you more of an idea of what I mean......

Here is what it looks like when you set the page to auto-open a PDF preview

Screen Shot 2015-07-28 at 8.44.43 PM.png                     

Here is what it looks like when they copy and paste a screenshot of their file.

Screen Shot 2015-07-28 at 8.42.15 PM.png

If I could make the Box preview frame taller, I think I could make them stop making all their content totally inaccessible.

As a pay it forward type of tip, we also wanted to make the default height of files embedded from the modules area taller.  Here is the CSS that will do that:

iframe#file_content{

  height: <insert desired size here>;

}

Thanks in advance for any help!!

1 Solution

Thank you marinated_pork​!  I tried the #doc_preview CSS ID, and it unfortunately did not impact my file previews :smileyconfused:, but it led me to dig into the page code a little bit more, and see where the doc preview div was.  I discovered that my page code uses an iFrame to control the height of the Box previewer and there appears to be a hardcoded height (of 400px) in there at the element style level, and there's no CSS class or ID on the iFrame to override it.  Here's what it looks like:

Screen Shot 2015-08-01 at 8.07.52 PM.png

What makes it tricky is that if you use the show-content class and iframe, then it also makes user created iframes the same height.  Eeeek!  So I threw span in as well in hopes that not many people will put their manual iframes inside of a span.

This code was the only thing that worked to increase the height for me, but I'm worried it may break something that I'm not considering....

.show-content span iframe {

    height: <height> !important;

}

Looking at the code, is there an approach that I'm missing?

We'll see how it goes.   I'm sure I will hear about it if it made something wonky. 

View solution in original post