I have a jQuery Datatables inside my iframe. The first time I load the page with the iframe it clips the height (see image).
On any resize, if I e.g. make the page narrower, it fixes the height (see image). How can I get the iframe height correct on first load?
https://biofokus.no/narin/
My shortcode:
Code:
[advanced_iframe use_shortcode_attributes_only="true" src="https://narin.biofokus.no/indexbio_sa.lasso" id="narinbio" enable_responsive_iframe="true" enable_external_height_workaround="true" width="100%" height="800" url_forward_parameter="ALL" scrolling="no" hide_page_until_loaded_external="true"]
My js on bottom of the iframe:
Code:
<script>
var iframe_id = "narinbio";
var element_to_measure_offset = 30;
var updateIframeHeight = "true";
var resize_on_element_resize = "#frame-content"
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
var iframe_content_id = "frame-content";
var iframe_content_styles = "overflow:hidden";
</script>
<script src="https://biofokus.no/wp-content/plugins/advanced-iframe/js/ai_external.js?vs=38"></script>
var iframe_id = "narinbio";
var element_to_measure_offset = 30;
var updateIframeHeight = "true";
var resize_on_element_resize = "#frame-content"
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
var iframe_content_id = "frame-content";
var iframe_content_styles = "overflow:hidden";
</script>
<script src="https://biofokus.no/wp-content/plugins/advanced-iframe/js/ai_external.js?vs=38"></script>
| Attachments: |
|
File comment: on resize ok height iframe_resize.jpg [ 60.4 KiB | Viewed 4199 times ] |
|
File comment: on first load the iframe is clipped iframe_first_load.jpg [ 48.1 KiB | Viewed 4199 times ] |