Jump to content
  • 0
pbullock

Resizing an Iframe

Question

I am trying to deploy on iframe on my website.  Iframe is the only deployment method available for me (for technical reasons).

This is my deployment code:

<iframe name="Add an Asset" title="Add an Asset" src="https://c0abf873.caspio.com/dp/896060006294dfe2bf154556bccc" width=100% height="100vh">Sorry, but your browser does not support frames.</iframe>

The iframe works fine in the width (at 100%), but the height only seems to grow about 50% of what it needs.  I see a vertical scrollbar that is unnecessary.I have also tried height=100% but this doesn't work at all.

I also tried this in the Custom CSS with no better results:

iframe {
    width: 100vw;
    height: 100vh;
}

Is there something I am missing here?

Phil

Capture.JPG

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
On 12/15/2017 at 10:53 PM, pbullock said:

I am trying to deploy on iframe on my website.  Iframe is the only deployment method available for me (for technical reasons).

This is my deployment code:


<iframe name="Add an Asset" title="Add an Asset" src="https://c0abf873.caspio.com/dp/896060006294dfe2bf154556bccc" width=100% height="100vh">Sorry, but your browser does not support frames.</iframe>

The iframe works fine in the width (at 100%), but the height only seems to grow about 50% of what it needs.  I see a vertical scrollbar that is unnecessary.I have also tried height=100% but this doesn't work at all.

I also tried this in the Custom CSS with no better results:


iframe {
    width: 100vw;
    height: 100vh;
}

Is there something I am missing here?

Phil

Capture.JPG

You may check this post. I posted script for the similar inquiry there

Share this post


Link to post
Share on other sites
  • 0
On 12/15/2017 at 12:53 PM, pbullock said:

I am trying to deploy on iframe on my website.  Iframe is the only deployment method available for me (for technical reasons).

This is my deployment code:


<iframe name="Add an Asset" title="Add an Asset" src="https://c0abf873.caspio.com/dp/896060006294dfe2bf154556bccc" width=100% height="100vh">Sorry, but your browser does not support frames.</iframe>

The iframe works fine in the width (at 100%), but the height only seems to grow about 50% of what it needs.  I see a vertical scrollbar that is unnecessary.I have also tried height=100% but this doesn't work at all.

I also tried this in the Custom CSS with no better results:


iframe {
    width: 100vw;
    height: 100vh;
}

Is there something I am missing here?

Phil

Capture.JPG

 

Hi Pbullock,

You can also try this approach:

<iframe name="Add an Asset" title="Add an Asset" src="https://c0abf873.caspio.com/dp/896060006294dfe2bf154556bccc" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

-Franchiser-

 

 

 

Share this post


Link to post
Share on other sites
  • 0

Hi @pbullock,

If you happen to to have the HTML <body> tag as the parent element of your iFrame, you may want to try this code over here. Works well for me as viewed in Google Chrome.

 

<body style="margin:0px;padding:0px;overflow:hidden">
	<iframe src="[your iframe deployment src without brackets]" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

 

Hope this helps.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×