when I have HTML content with text, images and iframes I know I can display the HTML using a flutter_html package or other similar packages, but none of them supporting the iframe until now...I headed to the webview package which displays the whole HTML content but I can not control the size or the direction of the content If the content is on Arabic...any idea about displaying the iframe without using the webview, or using the webview with the option of at least control the HTML content and text direction?
Thanks in advance
image of the current text direction demonstrating my issue
"<p>موجز الأخبار ليوم الأربعاء 27-3-2019:</p><p> </p><p><iframe src=\"https://www.youtube.com/embed/qvW_wqCMkKQ\" width=\"400\" height=\"300\" frameborder=\"0\"></iframe></p>"
I am not sure what you are asking. But what I picked was that you want to be able to control the dimensions of the WebView.
If that is the case you can use the Container() class. i.e wrap the Webview widget as a child of a container
Container(
margin: const EdgeInsets.all(10.0), //set the margin for the container
width: 48.0, // width
height: 48.0, //height
child: YourWebViewComponent()
)
Let me know if thats what you wanted.
after a lot of searching I decided to try out changing in the HTML it self..so I added this tag to the existing HTML-note that I added it after searching and I have never dealt with HTML before and Do not know What they call these additions so I named it a tag-
"<font size='$textsize'face='Cairo'dir='rtl'><p>موجز الأخبار ليوم الأربعاء 27-3-2019:</p><p> </p><p><iframe src=\"https://www.youtube.com/embed/qvW_wqCMkKQ\" width=\"400\" height=\"300\" frameborder=\"0\"></iframe></p></font>"
Hope that it will help some one in the future :)
Related
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
Ok, so I am working on a javascript application. One feature is a help page for the application. The way I am trying to do it is to have a button that opens the help page - .html - in an iframe contained within a container div.
This works just fine, but I run into the well-known issue of iframes not scrolling in iOS(i.e. on iPads and iPhones).
There is a common fix for this, which involves setting overflow rules in the css for the container div.
So the initial CSS is something like:
#iframeContainer {
position:absolute;
left:0px;
top:0px;
width: 750px;
}
#iframeContainer iframe {
{
width:100%;
height: 600px;
}
and the css with the iOS fix is something like:
#iframeContainer {
position:absolute;
left:0px;
top:0px;
width: 750px;
height: 600px;
-webkit-overflow-scrolling: touch;
overflow: scroll;
}
#iframeContainer iframe {
{
width:100%;
height: 12000px;
}
The overflow rules are added to the css for the container, but in order to work, you have to set a height on the container. You also have to adjust the height of the iframe itself. If I leave it at its initial 600px, it never overflows the container div and there is no scrolling. If I don't set any height at all on the iframe, it hardly shows anything at all. So I have to set the iframe's height to contain all of the contents of the HTML file, which comes to 12000px.
All of this works, and the scrolling issue on iOS is fixed. But here's where I run into the issue in question.
The HTML page being loaded into the iframe has within it a bunch of anchor links that link to other places on the same page. After applying the iOS fix, those anchor links no longer work at all. Nothing happens when they're clicked.
I am reasonably sure that the reason is because when I set the iframe's height to 12000px, the HTML page behaves as though it is all displayed on one page, in which event, nothing happening is the appropriate behavior for anchor links.
So I think understand what is going on, and I'm just wondering if anyone has any ideas on how to make the anchor links work while keeping the iOS fix in tact. If I decrease the iframe's height to make the anchor links work, then less and less of the HTML page will show up within the iframe. If I remove the iOS fix all together, the anchor links will work but the scrolling won't work on iOS.
Open to anything. For the time being, I've abandoned the idea and the 'Help' button just opens the HTML page in a new tab/window.
So I have an iFrame displaying a Facebook page and I am trying to enable the native 'bounce' type scrolling however can't get anything to work.
I have tried this:
iframe {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
But have had no luck so far - tested on both simulator and real iOS device.
Any ideas?
I faced the same problem when our team built epub3 reader app on iOS.
Followed EpubJS v0.3 example, we could handle the problem.
Here is an example:
<div style="width:320px;height:570px;-webkit-overflow-scrolling:touch;overflow-y:scroll;">
<iframe scrolling="no" src="..." style="width:320px;height:8071px;"></iframe>
</div>
Note: you have to calculate iFrame height and set the CSS style (ex: 8071px). Using javascript, you can use
iframe.contentDocument.body.scrollHeight
You may ask me why we have to set height style. Followed some suggestions does not help us to handle handle dynamic content problem (you can see the problem here). By setting height, we can dynamically add or remove highlight texts of users.
Hope that helps,
This would be my approach...
Step 1. Increasing the size of the iframe until the scrollbars dissappear, like this: http://davidjbradshaw.github.io/iframe-resizer/
Step 2. Use David Walsh his trick with a parent div that scrolls the iframe: https://davidwalsh.name/scroll-iframes-ios
But I think it will fail, because of the lack of authentication for cross domain iFrames.
UPDATE: What if you would enlarge the iframe based on the scroll position of the parent div? So parent div scrolls 100px and you make the iframe 100px larger... (given the fact that the iframe has infinite height and assuming its scrollbar is hidden)
There is well known problem with media query width, which is not the same as viewport width in some browsers (WebKit browsers change the size of their CSS viewport when scrollbars are visible). I wanted to fix the problem by moving the vertical scrollbar from body or html to first wrapper div (as described on stackoverflow: https://stackoverflow.com/a/10091608/1647291).
The fix
Here's the fix with CSS:
body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
It moves the vertical scrollbar from body or html to the first div inside body. Thanks to that you don't need to worry about viewport widht in media queries.
The problem
But unfortunately this great method has one bad side effect - on iPad (and possibly on some other platforms too) page can't be scrolled smoothly. After you stop touching the screen it stops scrolling imediately, there's no smooth and slow easing.
This simple solution with CSS is much simpler and better than all those methodes with testing the viewport with javascript. Some of them are described here but they are not reliable or make the site works very slow:
CSS media queries and JavaScript window width do not match
http://github.com/tysonmatanich/viewportSize
http://github.com/ryanve/verge
Is there any way to use this CSS fix and make the iPad scroll correctly?
It is possible you are over thinking this. We make websites all day and this is not a problem. I think that you might be worrying too much about the specific px widths. If 680px vs 693px is a big deal, you are thinking about this the wrong way. I suggest you design mobile first and make a break point whenever it gets ugly (with ems). For sites with short pages and long pages, (causing the scrollbar to appear sometimes and jump between pages when there is no scrollbar) - to just add this and call it a day. Good luck!
html { overflow-y scroll }
When I load my jQuery Mobile page on an iphone, some of the page extends out of the initial viewport. The space that is out of the initial viewport to begin with is white, not gray which it should be. I've attempted to set the height to 100% using this line of code: [data-role=page]{height: 100% !important; position:relative !important;} however this still does not do the trick.
I always have the same problem with my JQM pages. I use that to make my page height 100%:
$(document).delegate('#yourPage', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
Hope this helps.
First, don't misuse !important. To diagnose what's wrong with the CSS, you can use Firebug in Firefox / Developer Console in Chrome. ( Safari & IE have similar things ). Some CSS may be overridden, or layers maybe overlapped.
Without your HTML codes & jQuery scripts, I can't really help on this, but normally, to make the content to full height, you have to set html CSS and body CSS to use height: 100%;.