I am placing divs and iframes using position relative & absolute which is working fine on chrome but its not working in IE. I am using Foxit Reader in IE to show the pdf files.
Chrome (Test 1231 23123 is visible)
IE 11 (Test 1231 23123 is behind the iframe)
Below is my html:
<div class="document-previewer-container">
<div class="document-preview">
<div class="document-container">
<iframe id="pdf-container" ng-attr-src="{{vm.selectedDoc.pdfpath`}}"></iframe>
</div>
<div class="doc-overlay">
<p>Test 1231 23123</p>
</div>
</div>
<div class="documents-carousel-wrapper">
<!-- something -->
</div>
</div>
my .less file:
#import '../../styles/light-theme-definitions.less';
div.document-previewer-container {
//height: 400px;
//width: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
//padding: 5px 2px;
> div.document-preview {
height: 88%;
//width: 100%;
position: relative;
.document-container{
height: 100%;
width: 100%;
position: relative;
}
.doc-overlay {
width: 95%;
height: 95%;
position: absolute;
cursor: pointer;
top: 0;
p {
padding: 2px;
}
}
}
> div.documents-carousel-wrapper {
position: relative;
overflow: hidden;
height: 12%;
min-height: 63px;
img {
width: 100%;
height: 100%;
}
}
Update: 1
Working PLUNKER. Please open it with IE or save it on ur local disk and open it with IE
Update: 2
I implemented the logic but still the div is not coming over pdf iframe. Please try clicking anywhere on Plunker.
Actually, I want the doc-overlay to be clickable in real life project. As u'll observe, the click event (using ng-click) is not working over PDF. Please refer the inspect element screenshot for more clarity. IE & Chrome. checkout the blue area too see the difference
You need to either do a hack where you add another iFrame or use library like PDF.js as described here https://stackoverflow.com/a/12977151/8833279
Related
I'm trying to create a header with position: sticky; and position: fixed; of one item inside it and second item without position: fixed;.
Here is the implementation: Codepen
The problem: when I open this Codepen in Chrome, everything is going well, but when I try this code in Firefox there is a strange blinking. You can try by yourself, just scroll down and up.
Just in case, here is the video: Youtube link
Here are the solutions that i've tried:
transform: translateZ(0); on header class is not working for me, because header__item stops moving.
Nested position: sticky; I can use position: sticky on header__item instead of position: fixed; but this solution is not working in Safari browser.
What I want: remove this blinking that you can watch on video.
Firefox version: 80.0.1 64-bit
OS: Ubuntu 18.04.5 LTS
NOTE: this bug may sometimes not reproduce on Windows (i don't know why), but always reproduces on Ubuntu or macOS operating systems. For Firefox 80.0.1 on my PC with Windows, everything works great.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: skyblue;
height: 300vh;
}
.header {
width: 100%;
height: 250px;
background: green;
position: sticky;
top: -80px;
}
.header__item {
height: 150px;
width: 100px;
background: tomato;
position: fixed;
top: 0;
}
.header__second-item {
height: 80px;
width: 100px;
background: purple;
margin-left: auto;
}
<header class="header">
<div class="header__item"></div>
<div class="header__second-item"></div>
</header>
To start, try to replace from position: fixed; elements to position: sticky;
In Firefox, it will be fixed, but child elements with the sticky position are not supported by Safari.
The only way that I see - to detect the browser and replace the position in accordance with the browser.
For example:
.header__item {
position: fixed;
}
#-moz-document url-prefix() {
.header__item {
position: sticky;
}
}
I'm trying to make iFrame adaptive according to window size. I almost done but in phone mode it's breaking, no idea why. I used a lot of examples about how to align iFrame, but no one worked well. Also, a space what you can see on screenshot below doesn't appears in html or css, and it seems like this space is out of body or html, at all. Any ideas what could that be? I'm using asp.net core web application with razor pages. iFrame is inside div tag what's inside main tag
Here's my css code
.AdaptiveIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
}
.AdaptiveIframe {
position: relative;
padding-bottom: 100%;
height: 100%;
width: 100%;
}
html
<main role="main">
<div class="AdaptiveIframe">
<iframe frameborder="0">Oops! Your browser does not support iframe.</iframe>
</div>
#RenderBody()
</main>
I've suddenly found an answer. Here's my css code. But I'm welcome any suggestions if there's still anything to fix.
.AdaptiveIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 150%;
}
.AdaptiveIframe {
position: relative;
padding-bottom: 150%;
}
This might have been answered but I am really struggling to describe this issue.
On my website I have map div, a transparent slider div on top and non transparent info div below the transparent slider.
<div id="map"></div>
<div id="spacer"></div>
<div class="info"></div>
The css allows the info div to be slid over the map.
html {
overflow: hidden;
height: 100%;
}
body {
overflow: auto;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
}
#map {
position: fixed;
width: 100%;
height: 90%;
}
#spacer {
width: 100%;
height: 90%;
}
.info {
z-index: 999;
position: absolute;
background-color: white;
width: 100%;
min-height: 100px;
box-shadow: 0px 0px 10px slategrey;
}
Here is a picture of the undesired effect.
It shouldn't be possible to pull the sliding div away from the bottom of the browser.
Is there a html & css solution?
I think what you are looking at here is a browser drawback, which can be overriden in safari under ios by using a non-standard webkit rule called -webkit-overflow-scrolling , you can find information about it here on MDN. I have ran into this issue numerous times in the past, but I can't remember finding a fix for it.
You can try this simple "hack" to bypass it, but I don't think this is a good idea though:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
You can find more information about this issue here.
I have a div that when you mouseover has a child div appear to display information. The basic code is as follows:
HTML
<div id="container">
<div id="hidden_div">
<iframe></iframe>
</div>
</div>
CSS
#container {
position: absolute;
height: 20px;
width: 40px;
top: 8px;
left: 30px;
}
#hidden_div {
position: absolute;
background: url(../_images/inside_btn_back.png) repeat;
height: 60px;
width: 350px;
top: 0px;
left: 0px;
margin-top: 20px;
z-index: 50;
display: none;
border: 1px solid #a08f89;
}
#container:hover #hidden_div, #container.over #hidden_div, #container:focus #hidden_div {
display: block;
}
This works in all browsers except IE(specifically IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. don't know why its not working with the div. Here is a link to the live page here. The mouse over div is the facebook like button near the bottom of the page.
it's the page loaded in the iframe not having a transparent background which causes the hover to fail in IE.
I have a popup panel which shows nice on chrome and FF like this:
It's a grey iframe with this css style:
element.style {
z-index: 25000;
opacity: 0.5;
position: absolute;
background-color: black;
border-width: 0px;
top: 0px;
left: 0px;
width: 1366px;
height: 361px;
visibility: visible;
}
which contains a DIV:
element.style {
position: absolute;
z-index: 25001;
background-color: transparent;
left: 0px;
top: 0px;
width: 1366px;
height: 361px;
}
which contains another (main) white div:
element.style {
width: 400px;
overflow-y: auto;
overflow-x: hidden;
z-index: 25002;
visibility: visible;
position: absolute;
left: 483px;
top: 77px;
}
I do not understand why on IE 8 the panel with those tabs is white also, so basically it should be in the background like on Chrome...:
Do you have any clue?
I'm almost sure the problem is on the panel with the tabs and not on the popup one...
The css of the panel with the tabs is:
element.style {
width: 280px;
height: 500px;
position: relative;
}
UPDATE:
Panel tab is actually a table with the above style.
Ps: Do not blame me about css for the popup. Is mainly generated by the icefaces component.
Finally, solved...
Added this style to the div which contains the panel tab:
position: relative;
z-index:-2;
Please note that I've tried with z-index:0 or positive but was not working so a negative one was required...
The single drawback for this solution is that now, the parent div with its panel tab does not appear on Firefox.
Grr... I really hate IE.
UPDATE: I ended up using jQuery to put to that div, a negative z-index only for IE.