Tiddlers with application/pdf type get transcluded in tiny frame. How to change?

#1

Dear all,

I could perhaps get to the bottom of this with ample time. But I’m sure more advanced folks can send me to the right place right away, and perhaps this question is useful to others.

Here’s an example of an external toc tiddler, where both of the tiddlers transcluded in the toc have a _canonical_uri field, which effectively dedicates the tiddler to an externally-hosted graphic:

https://ethicsatwes.tiddlyhost.com/#%24%3A%2Fdemo%2FBeauvoir

One of these is a pdf, with tiddler type specified as application/pdf. When the full tiddler is opened in the story river, tiddlywiki properly displays the pdf within a nicely-scaled pdf-browser. But within the toc (or any other transclusion), the pdf displays within a tiny frame. Another tiddler which is similar, but whose _canonical_uri field links to a jpg (with tiddler type set to image/jpeg), is not affected in the same way (as is familiar to all of us who transclude jpg images regularly).

How can I tweak how a transcluded pdf tiddler displays (especially within a toc, if that’s easier to address) so as to use the available space well?

-Springer

#2

Hi Springer

I took a look in my browser’s developer tools.

There is an iframe which contains your pdf - searchable in the source by looking for ‘dropbox’ this has CSS

.tc-tiddler-frame iframe {
max-width: 100%;
}

I replaced ‘max-width’ with ‘width’ but kept the 100% and then the pdf displayed full width ( taking into account margins and so on ) of the containing element.

It was still displayed with a small height, I didn’t look into that aspect.

You probably want something like

.tc-tiddler-frame iframe {
width: 100% !important;
height: 600px;
}

in your custom css tiddler, not sure what the best route to pick a sensible default height, those values produced something sensible for me when I visited your page and over-rode the CSS using browser tools.