Why can I only get a very narrow box of pdf when I previewed by ?
This is my plnkr link:
https://next.plnkr.co/edit/wzQBQL7zw6LnMhB1
This is how it looks like:
https://run.plnkr.co/preview/cjoidu9k700093966xg9q2r4k/
html iframe
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
add a comment |
This is my plnkr link:
https://next.plnkr.co/edit/wzQBQL7zw6LnMhB1
This is how it looks like:
https://run.plnkr.co/preview/cjoidu9k700093966xg9q2r4k/
html iframe
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
add a comment |
This is my plnkr link:
https://next.plnkr.co/edit/wzQBQL7zw6LnMhB1
This is how it looks like:
https://run.plnkr.co/preview/cjoidu9k700093966xg9q2r4k/
html iframe
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
This is my plnkr link:
https://next.plnkr.co/edit/wzQBQL7zw6LnMhB1
This is how it looks like:
https://run.plnkr.co/preview/cjoidu9k700093966xg9q2r4k/
html iframe
html iframe
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
asked Nov 15 '18 at 9:17
BelterBelter
1,2271729
1,2271729
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The iFrame needs a fixed height and width. There is a bit of a trick to get it semi-responsive. First move your closing <div> for id="example1" to the other side of the iFrame. Then give the iFrame a class, or put the CSS in the in-line style.
<div id="example1">
<iframe class="iframe" src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf""></iframe>
</div>
CSS
#example1
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
.iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
The padding-top essentially becomes the aspect ratio for your height. You're just forcing height with padding. This keeps the aspect ratio consistent regardless of the window size and avoids the iframe getting chopped having manual pixel dimensions.
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53316017%2fwhy-can-i-only-get-a-very-narrow-box-of-pdf-when-i-previewed-by-iframe%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The iFrame needs a fixed height and width. There is a bit of a trick to get it semi-responsive. First move your closing <div> for id="example1" to the other side of the iFrame. Then give the iFrame a class, or put the CSS in the in-line style.
<div id="example1">
<iframe class="iframe" src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf""></iframe>
</div>
CSS
#example1
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
.iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
The padding-top essentially becomes the aspect ratio for your height. You're just forcing height with padding. This keeps the aspect ratio consistent regardless of the window size and avoids the iframe getting chopped having manual pixel dimensions.
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
add a comment |
The iFrame needs a fixed height and width. There is a bit of a trick to get it semi-responsive. First move your closing <div> for id="example1" to the other side of the iFrame. Then give the iFrame a class, or put the CSS in the in-line style.
<div id="example1">
<iframe class="iframe" src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf""></iframe>
</div>
CSS
#example1
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
.iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
The padding-top essentially becomes the aspect ratio for your height. You're just forcing height with padding. This keeps the aspect ratio consistent regardless of the window size and avoids the iframe getting chopped having manual pixel dimensions.
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
add a comment |
The iFrame needs a fixed height and width. There is a bit of a trick to get it semi-responsive. First move your closing <div> for id="example1" to the other side of the iFrame. Then give the iFrame a class, or put the CSS in the in-line style.
<div id="example1">
<iframe class="iframe" src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf""></iframe>
</div>
CSS
#example1
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
.iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
The padding-top essentially becomes the aspect ratio for your height. You're just forcing height with padding. This keeps the aspect ratio consistent regardless of the window size and avoids the iframe getting chopped having manual pixel dimensions.
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
The iFrame needs a fixed height and width. There is a bit of a trick to get it semi-responsive. First move your closing <div> for id="example1" to the other side of the iFrame. Then give the iFrame a class, or put the CSS in the in-line style.
<div id="example1">
<iframe class="iframe" src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf""></iframe>
</div>
CSS
#example1
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
.iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
The padding-top essentially becomes the aspect ratio for your height. You're just forcing height with padding. This keeps the aspect ratio consistent regardless of the window size and avoids the iframe getting chopped having manual pixel dimensions.
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
answered Nov 15 '18 at 10:41
Brian GreenBrian Green
412
412
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53316017%2fwhy-can-i-only-get-a-very-narrow-box-of-pdf-when-i-previewed-by-iframe%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
