The scrollbar within the Iframe stops before reaching the end of the content. Is there a method to adjust the scrollbar height to match the height

Is there anyone who can assist me with this issue? A large webpage is getting cut off by about 70% near the end of the scroll bar.

Here is the code snippet in question:

</div>
    <div id="divCustomDataPreview" title="Custom Form Preview"   style="background-color: #ffffff; height:580px; !important; display: none;overflow:hidden; " >
        <iframe  id='ifrCustomDataPreview' style="border: 0px; overflow:hidden !important;" scrolling="yes" width='100%' height='100%' onload='javascript:resizeIframe(this);'></iframe>
    </div>
    <div id="divFormCreate" title="Convert To Form" style="display: none;background-color:#FFFFFF">


function resizeIframe(obj) {
    var BrowserName=BrowserDetecting().split('#')[0];
    if(BrowserName == "Chrome" || BrowserName == "Safari")
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    else                
        obj.style.height=obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
javascriptcssiframescrollbar

Answer №1

I was able to successfully adjust the height using a javascript function, but ran into an issue with the timing of when the height was set in relation to when the iframe was loaded:

function resizeIframe(iframeID) {   
    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById('content');

    iframe.style.height = container.offsetHeight + 'px';            
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Requesting data download via AJAX for a CSV file

I have a unique feature on my website where users can customize and download a summary page based on specific elements they select to include in the final CSV file. To streamline the process, I want to display the summary page to the user and initiate the ...

javascriptphpajaxcsv

What is the best way to retrieve the value of an nth column in a table using

Is there a way to retrieve the value of a specific column in a table? For example, I want to get the value of the 2nd column. I have no trouble getting the first one using this method - it works perfectly fine. However, when I try to retrieve the value of ...

javascriptjqueryhtml-table

How to clear an HTML text input using JQuery

Can someone help me with adjusting the default value of an HTML text input using JQuery event handlers? I want to set it to empty. Here is the input: <button id="setColor">Set Color</button> <input type="text" id="colorText"> This is t ...

javascriptjqueryhtml

Looking to transform a PHP output value

I have a form with checkbox input, and a hidden 'sibling' input attached to it, in order to generate values of either '0' or '3' based on the checkbox status. When unchecked, the value is '0', and when checked, the ...

javascriptphphtmlforms

What is the best way to create ng-options that only display unique values?

I am trying to modify my ng-options element so that it only displays unique values. Currently, it looks like this: https://i.sstatic.net/5CtSk.png However, I want it to display one value at a time. For example: <select class="form-control" ng-model=" ...

javascriptangularjsangularjs-ng-options

Both the "if" and "else if" conditions are performed within the filter function in Angular-8 using JavaScript

When running the code snippet below, both the "if" and "else if" conditions are executed within the filter function. However, the output I am receiving is not as expected: https://i.sstatic.net/WpFy5.png this.users.filter((hero)=> { if(hero.name ...

javascriptangular

Leveraging the power of the tumblr API (JSON) and utilizing $.getJSON to effortlessly pull the latest posts from my personal tumblr

Facing an issue with fetching content from my tumblr in JSON format. I have obtained the API key and the correct API link, but there seems to be a problem within the $.getJSON function. Below you can see how my JSON data and jQuery code are structured. Th ...

javascriptjqueryjsontumblr

Display elements on hover of thumbnails using CSS

I'm struggling with the logic of displaying images when hovering over corresponding thumbnails using only CSS. If necessary, I can do it in JavaScript. Here's my latest attempt. <div id='img-container' class='grd12'> ...

javascripthtmlcss

Angular JS Retrieving Data in the Background with the Assistance of $timeout or $interval Service

Looking to fetch data from a webapi in the background using either the $timeout or $interval service in Angular JS. I have some concerns about how the $timeout and $interval services work. I've run into issues when incorporating these services into m ...

javascriptangularjsajax

AngularJS is throwing an error claiming that the controller is not defined and is not a function

Struggling to create a basic angular application, every time I attempt it, I encounter this issue and can never find a solution. The content of App.js is as follows: angular.module('Euclid', ['ui.bootstrap', 'ngRo ...

javascriptangularjs

Can three.js provide a function that mimics the movement of a camera?

In the scenario where I have two models in my scene, I am able to move the camera to various locations within the scene by clicking a button. This is achieved using the following code snippet: camera.position.set(0, 100, -350); //sets initial camera orbit ...

javascriptthree.js

The table does not appear correctly when the data within it is concealed

Table structure appears correctly in Mozilla browser, however it collapses in Chrome. The table data will be populated upon selecting an option from the dropdown menu. I attempted using table-layout: fixed but it did not resolve the issue. ...

htmlcss

Implementing ng-if with asynchronous functions: A step-by-step guide

The objective here is to display an image in a template only if the ratio of its dimensions is greater than 2. <img class="main-img" ng-if="showImage($index)" ng-src="{{item.img}}"> Implementation: $scope.showImage = function(index) { var img ...

javascriptangularjs

Scene three js appears to be stuck in a perpetual state of emptiness, making it challenging to start

I've encountered a major issue with understanding how to use three.js. Despite my best efforts over the past few days, I haven't been able to successfully implement three.js into my projects. Initially, I attempted using Parcel by starting a new ...

javascriptthree.js

Using the <!DOCTYPE html> tag seems to cause issues with the measurements of div elements

Currently in the process of developing a website, I created this div: #container #content .imagewindow { width: 560; height: 380; background-color: #1E1640; } After adding the doctype html tag, the browser appears to be disregarding my styling commands ...

csshtmldoctype

d3js operates effectively after the encoding and decoding of data has been completed

Currently, I'm diving into creating a data visualization using d3js paired with hierarchical layout. The data I am working with has the following structure: 0 / | \ / | \ 1 5 3 \ | | \ | | ...

javascriptjsond3.js

Position the Bootstrap button on the right side

this is the code I am working with: <p class="h1 p-3 mb-2 bg-danger text-white text-danger">Lagerbestand unter Mindestmenge! </p> <br /> <div class="border text-center"> <p class="h5 text-center">Durc ...

htmlcsstwitter-bootstrap

Is there a method to detect the presence of a bot in your discord server using another bot?

I am developing my own unique discord bot and I am looking to implement a feature that can determine if a specific bot is present in the server. Here's how I've been approaching it: if (!message.guild.args[0]) In this code, args[0] represents ...

javascriptnode.jsdiscorddiscord.js

White edges on Firefox border-radius style

One issue in Firefox is its inability to properly handle the clipping of rounded corner elements, especially when multiple backgrounds are involved. This problem can sometimes be resolved by setting background-clip: content-box within a class for non-absol ...

htmlcssfirefoxborder-radius

Executing numerous xhttp.send requests within a single webpage

Hey there, I'm facing an issue with xhttp.send(); as it keeps giving me the error message net::ERR_EMPTY_RESPONSE Here is a snippet of my code. Whenever a user clicks too quickly, they get kicked off the page. Is there a way to prevent this? docum ...

javascriptphphtmlajax