Does anyone know if there is a global CSS change that will make the Box document preview taller?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!!
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.