Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum
https://www.tinywebgallery.com/forum/

Problems with autoheight and auto resizing
https://www.tinywebgallery.com/forum/viewtopic.php?f=21&t=5500		 Page 1 of 2
Author:  Asle [ 19. Nov 2018, 15:08 ]
Post subject:  Problems with autoheight and auto resizing
I bought the PRO version but my problems are still not solved. I am including a remote page where I have full control of the remote page. Still the IFRAME cuts the content and adds scroll.
On the main page I have this code:

Code:
[advanced_iframe use_shortcode_attributes_only="true" src="https://narin.biofokus.no/indexbio.lasso" id="narinbio" enable_responsive_iframe="true" enable_external_height_workaround="true" width="100%" height="800" url_forward_parameter="ALL" add_iframe_url_as_param="remote"]


On the remote page I have this code just before
Code:
</body>
.
Code:
<script>
var iframe_id = "narinbio";
var updateIframeHeight = "true";
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
var iframe_content_id = "#frame-content";
</script>   <script src="https://dev.biofokus.no/wp-content/plugins/advanced-iframe/js/ai_external.js?vs=6"></script>


My structure on the remote page is:
#frame-content
#nav
#content
#right
/#frame-content

#right floats to the right. When I open the page the first time (https://dev.biofokus.no/narin/), #content and #right are empty. But still #nav gets cut off at the bottom and the IFRAME is 412px height. Don't know where that comes from. Sometimes the page shows correct. On the next page refresh everything is wrong again!

When I send in parameters I want the tallest of #content or #right to decide the IFRAME height. How do I do that. Check here:
Show one post: https://dev.biofokus.no/narin/?nid=4229
Show a free search: https://dev.biofokus.no/narin/?fritekst=myr

The problem is It suddenly works but usually fails with the height. It is important that one can do a search and the iframe adjusts height to the content.
Author:  TinyWebGallery [ 19. Nov 2018, 16:12 ]
Post subject:  Re: Problems with autoheight and auto resizing
Hi,

it failed for me the first time also because of a js error. You the "add param to url" feature active.
The Javascript ai.js is loaded there too late. Go to the options and select that ai.js is included to the header.

After that it worked and already measured a height. But it seems you have some small additional margins which are not taken into account.
You can add an additional height of e.g. 10 px.

set
var element_to_measure_offset = 20;

after
var iframe_id = "narinbio";

you also have a overflow:auto at the <html>. This will generate scollbars also even when not needed.

add
var iframe_content_id = "body";
var iframe_content_styles = "overflow:hidden";


Best, Michael
Author:  Asle [ 20. Nov 2018, 12:24 ]
Post subject:  Re: Problems with autoheight and auto resizing
Thanks for your reply Michael!
I am not sure I understand your suggestions.

I changed the code on the remote page to this:
Code:
<script>
var iframe_id = "narinbio";
var element_to_measure_offset = 20;
var updateIframeHeight = "true";
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
var iframe_content_id = "body";
var iframe_content_styles = "overflow:hidden";
</script>   <script src="https://dev.biofokus.no/wp-content/plugins/advanced-iframe/js/ai_external.js?vs=6"></script>


In the OPTIONS I choose: Include ai.js in the footer -> NO

- The first time I open the page It shows the content: https://dev.biofokus.no/narin/
- When I select an option from: "Velg fylke" the frame does not expand and clips the bottom of the search box.
- If I have send in a parameter the iframe expands correctly: https://dev.biofokus.no/narin/?fritekst=kalkskog
- If I send in a parameter to show in "right" DIV it does not expand: https://dev.biofokus.no/narin/?nid=4102

So It does not understand the height of the right DIV, - understands the height of the "content" DIV when loaded initially, - does not get the height of "content" if internal ajax call.
Author:  TinyWebGallery [ 22. Nov 2018, 17:02 ]
Post subject:  Re: Problems with autoheight and auto resizing
It the content does change because of an ajax call you need to enable resize on element resize.

See here for a full description:
http://www.tinywebgallery.com/blog/advanced-iframe-resize-to-content-summary

Hobe this helps. If you think I should improve this page even further please let me know.

Best, Michael
Author:  Asle [ 22. Nov 2018, 21:46 ]
Post subject:  Re: Problems with autoheight and auto resizing
Thanks but still struggling.
Here is structure on the remote page:
#frame-content
#header
#content
#right

The first time I load the page it does not resize even if the #right is taller than the initial iframe size.
https://dev.biofokus.no/narin/

If I choose an option that expands the #content, the page expands. Another thing, there is always scroll bars, seems there is always some content padding?

Here is my [advanced_ifram] code now.

Code:
[advanced_iframe use_shortcode_attributes_only="true"
src="https://narin.biofokus.no/indexbio.lasso" id="narinbio"
enable_responsive_iframe="true"
enable_external_height_workaround="true"
width="100%" height="800"
url_forward_parameter="ALL"   
add_iframe_url_as_param="remote"
resize_on_element_resize="frame-content"]
Author:  Asle [ 25. Nov 2018, 20:53 ]
Post subject:  Re: Problems with autoheight and auto resizing
Any help?
Author:  TinyWebGallery [ 28. Nov 2018, 19:57 ]
Post subject:  Re: Problems with autoheight and auto resizing
resize_on_element_resize="frame-content" needs to be set on the external workaround. Not in the shortcode.

If you have a problem at the first load you should try to add a delay of e.g .100ms. Maybe not everything is rendered properly.

About the scrollbars

var iframe_content_id = "body";
var iframe_content_styles = "overflow:hidden";

ist set but something else is setting overflow:auto after wards

So please set on the external workaround tab that css is included directly and change
var iframe_content_styles = "overflow:hidden";
to
var iframe_content_styles = "overflow:hidden !important";

But you should do this AFTER the resize does work!

Best, Michael
Author:  Asle [ 29. Nov 2018, 18:09 ]
Post subject:  Re: Problems with autoheight and auto resizing
Hi,
Still not working. I added all the modifications you wrote. It seems the left DIV works fine and resizes the iframe. But the right DIV does not resize the iframe.

The first time I load the page it does not resize since the right DIV is tallest. There must be something wrong maybe with my right DIV since it does not make any height? When I open the page and do ajax calls selecting an option, the page resizes because of the left DIV. The right DIV has no effect. Any suggestions?
Author:  Asle [ 4. Dec 2018, 16:35 ]
Post subject:  Re: Problems with autoheight and auto resizing
Hi, I really wish I could get some help to get this to work. I have plans to use Advanced iframe on many pages but it is taking too long to get help. Do I have to look for another solution?
Author:  TinyWebGallery [ 4. Dec 2018, 22:28 ]
Post subject:  Re: Problems with autoheight and auto resizing
Sorry for the delay. I currently have some spammers (50-100 messages a day...) in the forum so I unfortunately missed your new message.

I'll take a look. It seems the right div is not taken into the measurement. Even when I look with the browser tools of the browser.
the div has a position:absolute. Therefore it is not part of the surrounding divs. It is only counted in the body.

So please use a div structure if you like to display something on the right. Like float thing left and right...

you can use body as element do measure but then iframes don't shrink on all browsers.

Best, Michael
Author:  Asle [ 5. Dec 2018, 18:14 ]
Post subject:  Re: Problems with autoheight and auto resizing
Hi,
Sorry to hear you have spamming problems! Forgive my impatience :-)

Yes, I see the problem now. I will try to fix the right DIV from absolute position to float.

Just another question (maybe). I am including an external page where I have no access to the external page. The external page is full responsive so I want the page to fill my page all the way down to the footer according to how the users has resized the page. If the user has a full height page on his screen, the external page should fill. Do I have to wrap the IFRAME in a 100% height DIV? I tried that but did not work.
Author:  TinyWebGallery [ 5. Dec 2018, 22:48 ]
Post subject:  Re: Problems with autoheight and auto resizing
About your 2nd problem.

100% is not working here. But you can try 100vh
See
https://www.w3schools.com/cssref/css_units.asp

My plugin also supports calculations. so 100vh-200
is supported. this means 100% of the browser height - 200 for e.g. a header.

Does this help you?

Best, Michael
Author:  Asle [ 6. Dec 2018, 14:52 ]
Post subject:  Re: Problems with autoheight and auto resizing
Thanks!
Where do I put "100vh-200" ?
I tried to put it in the code: [advanced_iframe scr="xxx" height="100vh-200"...] but that did not work.
Author:  TinyWebGallery [ 6. Dec 2018, 15:07 ]
Post subject:  Re: Problems with autoheight and auto resizing
it should be placed in the height.
please try 100vh-200px like written in the documentation.

Best, Michael
Author:  Asle [ 11. Dec 2018, 00:03 ]
Post subject:  Re: Problems with autoheight and auto resizing
Thanks Michael!
Works like a charm! Maybe I missed something in the docs. I am fixing the other problem, restructuring the layout away from position:absolute on the problematic DIV.

For now thanks again! :D
Page 1 of 2 All times are UTC + 1 hour [ DST ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/