I am using embed tag to return a pdf document. How can i make the pdf document responsive to screen without using height and width properties for embed tag?
This is what i tried so far but it doesnt display the pdf correctly. Please check the code on codepen link below:
https://codepen.io/Nick1212/pen/LePKWw
HTML:
<div>
<embed src='https://gradcollege.okstate.edu/sites/default/files/PDF_linking' />
</div>
CSS:
.pdf-embed {
position: absolute;
top: 0;
bottom: 0;
display: block;
height: 100%;
width: 100%
padding: 0;
overflow: hidden;
}
I'd also like to know if iframe tag is a better solution for this.
UPDATE: Please check the codepen link. But pdf doesnt change on changing screen size. I could make the pdf bigger but Pdf stays same size.
.responsive {
position: relative;
padding-bottom: 56.2%;
height: 0;
margin: 10px 0;
overflow: hidden;
}
.responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
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%;
}
I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
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
I am trying to show the image in full page and if the size of the browser window reduces, the image should resize proportionally.
I should be able to get the image to center of the page when browser size reduces.
I have tried something like this fiddle
HTML
<div>
<img src="http://yournaperville.com/wp-content/uploads/2013/06/disney-world.jpg"/>
</div>
CSS
*{
margin: 0;
}
html{
background-color: #666666;
}
img {
height: auto;
width: 100%;
}
div{
height: auto;
width: 100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I am not sure how far I am right. can anyone help me
change img height to 100% and overflow:hidden to html. Works for me!
I tried to create HTML document with one layer in center like that:
<body>
<div id="background">
LONG TEXT HERE
</div>
</body>
and I set
html, body {
margin: 0;
height: 100%;
min-height: 100%;
background-color: #color1;
}
and
#background {
width: 80%;
height: 100%;
position: absolute;
margin-left: 10%;
display: block;
margin-right: 10%;
background-color: #color2;
top: 0px;
bottom: 0px;
}
But somehow if the text exceed height of the display and when I scroll down there is no background. I have checked in FireBug it looks like if the whole document is only the size of the initial window.
I need to make it 100% height. Could you please help me?
Remove height: 100%; and position: absolute;
It will work. Like below
#background {
width: 80%;
margin-left: 10%;
display: block;
margin-right: 10%;
background-color: #093;
top: 0;
bottom: 0;
}
If the text is longer than the page, you will need to set the overflow property in CSS - otherwise elements will expand to fit their contents.
For example:
overflow: hidden;
Although this would make some text invisible, so you may want to use auto not hidden depending on what you are doing.