So first, I know that there are a lot of scrollable div questions, but I did not see one that seemed to address my problem, so bear with me!
Here is what I am trying to do:
I need to display some content in an iFrame (it's a report output that I need to embed in my application).
I am hosting the iFrame in a div.
I want for the div and iFrame to size based upon the size of the user's browser window.
If the content in the iFrame is larger than the div, I want for the div to scroll
I can't make the iFrame scrollable, because this is really hosted in a larger UI construct -- if the iFrame had scrollbars, there could be 2 sets of scrolls in my "real" application (in "real life", I won't have control of the Div).
The problem:
I get scrollbars, but a large report is still clipped vertically -- it's as though the scroll does not really take into account the full size of the div.
Here is my HTML:
<div style="width:100%; height:100%; overflow: auto">
<iFrame src="a url" style="width:100%; height:100%" scrolling="no"></iFrame>
</div>
If I remove the overflow style from the div and make the iFrame scrollable, it works, but I can't do that in production, because the host for that iFrame really needs to own the scrollbars.
Unfortunately the code that you have is not going to work. When you have a DIV set to 100% height its looking at the height in relation to the browser window so it stops there. It has no way of knowing how much height is needed that exists inside the iframe.
There may be a way to do what you want with JavaScript. Check this SO question and it may have a solutions you're looking for: Adjust width height of iframe to fit with content in it
Related
I'm in the process of developing a website which uses the layout of having the navigation iframe on the left, and the content iframe in the middle. Given that some of the pages which will display in the content iframe have significantly less text than others, I don't want to just have some arbitrarily large height value for my content iframe as that will result in unnecessarily large amounts of whitespace for most pages.
Ideally, I should be able to scroll on the content iframe while leaving the rest of the webpage in place, and I should be able to scroll only as far as there is content on the currently loaded page in the content iframe (maybe plus 25 pixels or so just for some nice padding).
Currently, the code for the content iframe is as follows:
<iframe name="content" src="content.html" style="height:2500px; width:1500px; border:none; position:absolute; top:215px; left:205px; scrolling:yes; overflow-y:scroll;" title="Content Pane"></iframe>
I want to avoid JavaScript if at all possible. I've went on probably a dozen different websites now to no avail, but this seems like it should be a simple problem to solve.
I have an iFrame within a page and it has a chat-icon that should stick to the bottom of the screen (but of course it will have to remain in the iFrame when scrolled out of the view).
The iFrame stretches outside the main viewport and as it seems, the iFrame is only aware of the bottom of its own document/viewport which in my example resides below the bottom of the browser window. It is not aware of the bottom of the parent page which in this case is the bottom of the browser window..
The question is simply, is there a way to get this to work with CSS only from within the iFrame? I do have the option to post messages with i.e. page height down to the iFrame. I am trying to avoid Javascript solution to position the icon manually on scroll event, due to its flickeryness...
I'm unaware of any way to do this in a CSS only fashion as the iframe is going to be completely unaware of the larger page (and that page's viewport) because it's own viewport is the bounds of the iframe itself, and the screen.
I think the only way to do this is with javascript using postMessage to pass the viewport dimensions down into the iframe where you can adjust the bottom value. To avoid flickering, add a short transition to the icon CSS so it slides into the correct place.
I'm trying to show an Iframe with only a specific div from a page. I've seen some topics about that, but each of them considers that we know the size of the div, and restricts the Iframe dimensions to the size of the div and prevent scrolling.
In my case, I want to restrict the portal to a specific div which can evolve in the future and have a different size. I've seen topics which use page anchors, with this kind of iframe tag :
<iframe title="Title" ng-src="http://www.exemple.com#anchor"></iframe>
I've tried this but it seems not to care and still display the whole page. the only things I know about the div are its id, its classes. It contains a variable number of other divs.
Is there a way to have an Iframe which adapts to the div size in any case?
By the way I have strict rules on my project, so no jquery, only angular as far as it is possible.
Thank you.
I have created a html page which simply has a div and an image inside of it.
My problem is when I resize the browser screen, the image is also resized. I would like to make something to whenever the browser screen changes its width, for example, the image keeps the same resolution by showing scroll-x to see the entire image.
I could do it by doing some workaround. Please see the fiddle below:
http://jsfiddle.net/EB2cq/
<div style="width: 1424px; ">
<img src="http://1.bp.blogspot.com/_duWYbLDtB5s/RxD10qnsOZI/AAAAAAAAACc/9nPZhQRAVZ4/S658/google_logo_halloween_d-(mip.jpg"/>
</div>
As you can see I can scroll through the image when the browser screen changes its width. But in my case I don't want to see the width of a div cause I only want to show the scroll bar when it is really necessary.
If you remove width style attribute from div in the fiddle above, the behavior is what I'm expecting. The div gets the scroll x only when the width of the page is less than the width of the image. However, in my web application, the same thing does not happen. The image is also resized according to browser width.
What can I be missing here? I have exactly the same fiddle code in my web application
I took a look at this question but it has not helped so much:
Get image to stay fixed even with window resize
Have you checked the style of the parent element(s). That might be the issue.
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right