I have a Document viewer with a .less file containing the following styling:
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, .text-container, video, iframe, pre {
height: 100%;
width: 100%;
position: relative;
}
.document-container > img {
max-height: 100%;
max-width: 100%;
}
.text-container pre {
margin: 0;
padding: 0;
}
.doc-overlay {
width: 95%;
height: 95%;
position: absolute;
cursor: pointer;
top: 0;
p {
padding: 2px;
}
}
}
}
The HTML code is as follows:
<div class="document-previewer-container">
<div class="document-preview">
<h3 ng-click="vm.openPDF()">yu</h3> <----- THIS CLICK IS WORKING
<div class="document-container">
<!-- PDF show in iframe -->
</div>
<div class="doc-overlay" ng-click="vm.openPDF()"> <---- THIS CLICK ISN'T becuse if is hidden by iframe
<!-- any content is shown on the top of PDF file in chrome only, not in IE -->
</div>
</div>
</div>
</div>
The click event works on <h3> tag but not when clicking on the div with css class 'doc-overlay'.
How can I address this issue?
Note: I am using Foxit Reader plugin for IE11
Update1
I came across this similar question, where the iframe was overlapping
.doc-overlaycausing the click event to malfunction. Any suggestions to resolve this, please?