4

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) chrome

IE 11 (Test 1231 23123 is behind the iframe)

enter image description here

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

Shashank Vivek
  • 16,888
  • 8
  • 62
  • 104
  • Have you played around with the CSS z-index property? https://www.w3schools.com/cssref/pr_pos_z-index.asp – Webbanditten Mar 31 '17 at 06:34
  • @Webbanditten: Yep, it's not working :( – Shashank Vivek Mar 31 '17 at 06:43
  • 1
    Possible duplicate of [z-index does not work in Internet Explorer with pdf in iframe](http://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe) – Webbanditten Mar 31 '17 at 08:36
  • 1
    I tested your updated code and it didnt work, which resulted me to Google a little since I could see that the z-index had no effect - I found the answer and marked your post as Possible duplicate - I got it working btw. Using the thread I linked to. – Webbanditten Mar 31 '17 at 08:38
  • 1
    Thanks for the guidance @Webbanditten, please refer Update 2. – Shashank Vivek Mar 31 '17 at 10:16

1 Answers1

-1

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

ihor.eth
  • 2,207
  • 20
  • 27