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

[mlattke]

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

                     

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

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!!

[marinated_pork]

If I am correctly understanding the location of your issue, then you may adjust the height of the file preview <div> with the following CSS selector:

#doc_preview {

    height: <height> !important;

}

Adding the '!important' flag prevents the tag from being resized by scripts when the iframe loads.

Hope that helps,
Matt

[mlattke · Accepted 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:

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. 

[marinated_pork]

Hmmm, sorry for the late response  @mlattke ​.

What is the exact resource path that you are viewing the page on? Like is it /course/xxx/assignments/xxx/files? If you're still having trouble, I can try an emulate the exact environment that you are working in and give you an answer that works.

Thanks,

Matt

[ephraimross1]

This seems to be working fine for me so far, Michelle. Have you come across any abnormal behavior?

[mlattke]

Hey Ephraim, It has been working for us for a while.  It is a bit of a hack to be sure, but it seems to work!  😃

[jbreslow]

I know I am late to the party, but this is what I went with:

#assignment_show .description.teacher-version, div.mce-edit-area {
    overflow:visible;
    height:auto;
}