I have a iframe. The markup goes something like this:
<iframe height="350" frameborder="0" width="100%" scrolling="auto" src="someurl.php" style="z-index:100;overflow:auto;">
</iframe>
As you can see iframe's height is fixed and 350.
In someurl.php I have a slider as the 1st element that moves vertically in up direction. I tried to set z-index of the slider to 1000 but no luck, my iframe just hides the slider behind it.
How can I solve this issue?
"In someurl.php I have a slider as the 1st element that moves vertically in up direction."
The contents of an iFrame can never exceed the boundaries of the iframe.
When the scripted element inside the frame "moves up vertically" (absolutely positioned), it's not visible any more.
If the frame and parent window are hosted at the same domain, you can inject the element (from inside the frame) to the parent window, so that the element "seems to go outside" the frame.
i'm not sure if i understand you correctly, can you maybe post a link so we can see the problem?
in any case, the z-index on a page shown in your iframe isn't affected by the z-index of the iframe itself (the iframe has its own DOM). also, z-index behaviour is sort of browser-dependent (especially if you're using IE versions earlier than 9; in such IE versions it will negatively inherit z-index, so all parent elements must be given an index as well).
is the iframe-content from a different site? if not, i'd concider javascript to populate a div in stead of using an iframe.
Related
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.
With reference to the question clip-path not working in SVG sprite, it seems we can't use style="display:none" to hide an SVG element that defines a clip path that will be used elsewhere.
However, the suggested alternative for hiding it given (using width="0" height="0") is not working for me (at least in Chrome, the SVG element still gets allocated space in the page layout, which causes a vertical scroll bar to appear, as I have a div with height="100%" above it). What other was are available for hiding an SVG that won't stop it being used for clipping?
In the end, I used position:absolute to take the item out of the usual HTML document flow. I don't understand why a zero-sized element would cause scrollbars to appear, but that certainly seemed to be what was happening.
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
In my website I have an iframe that is calling another website(a wordpress one). All I am trying display is a calendar in my iframe. Since the calendar iframe is larger than the area specified there is a scroll bar down and across. Also in the iframe are buttons that allow the user to select an event on certain days.
All of these buttons/functions work in IE, but NOT in Chrome, nothing is clickable, it is like the iframe is frozen in chrome.
I do not understand why this is occurring!
Thanks
I see that the div with class offset-by-four is on top of the iframe.
It has padding-left: 300px (in skeleton.css), but since it also has position: relative, I think you meant left: 300px instead. Then it will no longer be over the iframe and the iframe can be accessed.
Note, there are other elements with class offset-by-four too, so you may have to make other changes as well.
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