I am trying to display pdf in iPad using iframe, Pdf is displayed in ipad but not able to scroll the view.
I have also tried with -webkit-overflow-scrolling: touch; but it of no use.
I would appreciate if anyone can give me a better way of embedding the pdf file in html with ipad support
You should be able to scroll the embeded content as soon as your iframe has overflow:scroll property, but you may not be able to see the scrollbars
Another solution is to place the following javascript code inside the content which you would like to be able to scroll:
this.height=100%;
Related
At the moment, I am working on a website that works with Wordpress and Elementor (latest versions). I'm trying to implement an iframe using an html widget in the Elementor editor. The iframe works via an external website link (of a client) and I would like the iframe to automatically adjust in height to the content of the iframe. However, I am currently not getting this to work with the code below. In the Elementor editor itself it looks good, but on the website itself it is barely visible (due to the limited height) and it does not work. I have tried the following codes as well: height="auto", height="100%", but they didn't work either.
Does anyone know how I can fix this, please? I did try some solutions on other topics, but these didn't work either (and I'm not that good at coding). That's why I created a new topic.
The code used:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><script
type="text/javascript">iFrameResize({ inPageLinks: true },
'#externallinkname')</script><iframe id="externallinkname"
src="https:// externallink.com/"
width="100%" scrolling="no"></iframe>
- Note: The names of the following codes are changed, due clients privacy: #externallinkname, id="externallinkname", src="https:// externallink.com/"
I am using an IFrame to display a PDF which is sourced from a Base64 byte string. My frame tag looks like the below (I'm using Angular).
<iframe id="pdfV" type="application/pdf" [src]="currentBase64"></iframe>
The currentBase64 variable starts with data:application/pdf;base64, and has been appropriately sanitized. On any browser it works great. However, when I am in responsive mode in Chrome, or viewing on a phone, it doesn't display the frame for some reason. The only other example I can provide is the below
http://pdfmake.org/playground.html
This playground is doing the same thing I am. Passing Base64 to IFrame to display PDF. Notice is works great until you put the screen into responsive mode -- at that point it stops refreshing.
I believe it has to do with the Base64 part of it all because when I change my frame tag to something simple such as the below it works great, even on mobile devices.
<iframe [src]="'https://www.google.com'"></iframe>
Any thoughts or solutions?
I have an iframe and content inside it. In my IOS mobile safari browser, the content, instead of scrolling inside the iframe, spills out. It works fine for desktop version of the browser. Why does it spill for the mobile safari browser. The iframe is defined in following manner:
<iframe height='100px' width='650px' frameborder=0 src='/tandc.php#2'></iframe>
What kind of property changes we can make to fix this bug? Thanks in advance.
I'm not sure if that will solve your problem, but worth a try.
Try #Case solution from here and see what happen.
I have a website that needs to work without javascript.
In this website I show a iframe which contains the main content of the page. Because of a no javascript requirement, I have to show the iframe initially with scrolling. I want the scrollbars when there is no javascript.
If javascript is available, I resize the Iframe. I have to because the content of the page changes. Is it possible to remove the scrollbars when the frame is resized? Chrome and Safari hide the iframe scrollbars when its contents fit, so no issues there.
Is this possible in:
Firefox 13
IE 9
Opera 12
I've tried to do the following in javascript:
var iframe = document.getElementById('planneriframe');
iframe.setAttribute('style', 'style="overflow: hidden;"');
iframe.setAttribute('verticalscrolling', 'no"');
iframe.setAttribute('scrolling', 'no"');
it does add/change all the attributes, but the scrollbar is not hidden.
Solutions taking another approach or working javascript are welcome.
UPDATE
A better link to the site: http://planner.gvb.reizenapp.nl/advice
This contains no javascript for resizing the iframe tough, buts that not really relevant I think.
Well i'm currently developping my Toolbar for Google Chrome as a Extension. The main principe is that i'm all the time injecting the toolbar as an iframe by using the Content Script.
But now i see a couple of bug with gmail, google map/search, pdf an maybe other that i've not yet see...
Let me explain, when i go on gmail, i don't see my toolbar at all...
When i open Google, it seems really normal :
But then when i start a search my toolbar seems to overide the top link (web, images, videos, maps,...) I can't click on them anymore...
Next problem is when i'm trying to go on google map or trying to open a PDF, it seems to give the same css to these web pages from my toolbar...
Google Maps :
PDF :
Hope i where clear enough, do not hesitate to ask me question if necessary ;)
Why don't you use absolute/fixed positioning and style attributes? Using style attributes would remove the issue of the possible spread of CSS.
To remove the toolbar from pdf, you could write something that removes the element when on pdf?
Well, i've find a good solution to resolve the problem with PDF and Google Map it was a problem on my CSS.
About the google Search now it works perfectly by setting the body webpage as a fixed page like NeXXeus tell me but there is still a problem.
Check this out :
EDIT : We don't really see, the argument select/deselect is top: 0px;