I am using iframe to display pdf(asp.net mvc3).While PDF is in the iframe menu item is not visible ,means it is hiding behind the iframe.
Can anyone let me know how to aolve this.
Thanks in advance.
Your question is very bare-bones, please elaborate.
However, here is a solution:
Use z-index in CSS.
Give the iFrame an ID, like so:
<iframe id="pdf-display"></iframe>
Also give the menu item an ID in a similar fashion, for example id="menu-item". If you have multiple other menu items, contain them in a <div> and give the div an ID.
Then, in a separate stylesheet or in <style> tags, enter this code:
iframe#pdf-display {
position: relative;
z-index: 9;
}
#menu-item {
position: relative;
z-index: 10;
}
By increase the z-index by one for the menu item, it places the element "above" the iFrame, so to speak. The higher the z-index, the closer to the 'front' the element is.
Actually the valid solution to all iframe issues where parent frame content is hiding behind child iframe content is to use absolute positioning on the element you want to show above the iframe.
You can use relative positioned parent element with absolute position child elements for menus, popovers and what ever you wish. This is a catch all solution for any type of iframe or window elements.
Related
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
So i have a CSS menu bar and it sits in a iframe for a page. The menu works fine only the list now drops down past the iframe size on parent page.
What Im looking for is a way to make the drop down list show above the content of its parent page.
I have tried using zindex with no luck it still hides in the frame!
Not sure if this is possible any help would be great.
The best that I can offer is an example of why this will not work.
The iframe is a self-contained unit that is rendered within its own block.
Any element within the iframe that is positioned outside of the iframe block will not be visible.
In the example below, I repositioned the bold element to the left with a negative margin and you can see that the text gets clipped by the edges of the iframe.
You would need to use a jQuery AJAX call to get the source, grab the element of interest, and then insert it into the DOM of the parent page.
iframe {
margin-left: 50px;
}
<p>Outside of the iframe.</p>
<iframe seamless sandbox="allow-same-origin"
srcdoc='<p>Yeah, you can see it
in my gallery.
<b style="position: absolute; top:0; left: -20px;">
Some bold text.</b>'>
</iframe>
I'm adding a new dropdown div to an existing WordPress theme with it's own dropdown menu.
The new dropdown is activated and "dropping down" from an area above the menu.
The menu is set to z-index:99, but whatever value i give "my dropdown", the menu still appears on top of it.
Only exception is if i give the menu z-index:0, then all works fine except that the menu's dropdowns, of course, does not overlap items further down the page :/
Help appreciated!
Update: I have tried different position values, the menu needs to be "relative" to work.
The dropdown is now absolute, but relative gives the same result.
You have the following declared in your styles.css stylesheet on line: 316:
#section-tophat, #section-footer, #section-sub-footer { position: relative; z-index: 1; } /* Setup for :after double bgs below */
You're setting your #section-tophat to z-index:1 and thus at a lower level than your menu, so just remove your #section-tophat id from that line and your dropdown works fine.
z-index only work on position relative, absolute & fixed. So, give position:relative to your dropdown DIV.
Do you have an example page that we can check? You also may have stacking context issues.
Check my answer about how z-index works.
I am creating a span in javascript to append to a td. Works great. However, for some reason when I call
document.getElementById("myTd").appendChild(thisNewSpanObject);
the new span seems to think it is a child of the window. So when I set the attribute of
top:-10px;
the span is actually off the page, yet aligned horizontally with where it should be, when in reality, I just want it to display 10 pixels above where it would load if it did not have the css property assigned to it. Should I be using something other than top here? If I don't use top then the span loads right in place, 10 pixels too low (position:absolute; is set).
Add position: relative to the span element.
You are currently using position: absolute, meaning it will be relative to its nearest ancestor with something besides position: static (the default for elements) or the document.
Add position: relative to the element with ID myTd, not the span.
So I'm trying to do a sliding door CSS menu -- basically one image that you move the background position on when it's hovered or when it's active.
However, usually when I move to the next link using:
#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }
It takes from the last link to whatever width I specify. See the MAP icon on the image below? I'm trying to link it so that the link doesn't go all the way from the SEND FEEDBACK link to the map button. I just want the link to be that square.
So any ideas?
If I understand correctly, you should make the link (the <a> element) a block element and give it a specific width and height (and maybe relative/absolute positioning, depending on how your layout is set up). That way, the hit area for the link will be confined to those dimensions.
Something like this for the markup:
...
Map
...
And something like this for the CSS:
#xmenu li.ypart a { display: block; width: 40px; height: 35px; }