Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Post History
I have an iframe tag to which I didn't set height so it has a default height which is 150px (at least in Google Chrome). As a consequence, the iframe appears partially in such a way that constant ...
#6: Post edited
- I have an `iframe` tag to which I didn't set `height` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears partially in such a way that constant scrolling down is needed to fully read it.
- ## Possible solution
This reduced the scrolling in nearly 95%:- ```js
- const iframeToWorkOn = document.querySelector("#prcf_iframe");
iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + "px";- ```
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- ## My question
- How would you solve that problem?
- ## Update
Apparently, the original code in the question worked about 95% and not 100% due to 25px of CSS padding.I tried to add compensating 25px via `iframeToWorkOn.height += "25px"` but it caused an "endless loop" of adding 25px.
- I have an `iframe` tag to which I didn't set `height` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears partially in such a way that constant scrolling down is needed to fully read it.
- ## Possible solution
- This reduced the scrolling in nearly 90%:
- ```js
- const iframeToWorkOn = document.querySelector("#prcf_iframe");
- const paddingedIframeHeight = iframeToWorkOn.clientHeight;
- iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + paddingedIframeHeight;
- ```
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- ## My question
- How would you solve that problem?
- ## Update
- Apparently, the original code in the question worked about 90% and not 100% due to 50px of CSS padding (25px top and 25px bottom).
#5: Post edited
- I have an `iframe` tag to which I didn't set `height` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears partially in such a way that constant scrolling down is needed to fully read it.
- ## Possible solution
- This reduced the scrolling in nearly 95%:
- ```js
- const iframeToWorkOn = document.querySelector("#prcf_iframe");
- iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + "px";
- ```
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- ## My question
How would you solve that problem?
- I have an `iframe` tag to which I didn't set `height` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears partially in such a way that constant scrolling down is needed to fully read it.
- ## Possible solution
- This reduced the scrolling in nearly 95%:
- ```js
- const iframeToWorkOn = document.querySelector("#prcf_iframe");
- iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + "px";
- ```
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- ## My question
- How would you solve that problem?
- ## Update
- Apparently, the original code in the question worked about 95% and not 100% due to 25px of CSS padding.
- I tried to add compensating 25px via `iframeToWorkOn.height += "25px"` but it caused an "endless loop" of adding 25px.
#4: Post edited
- I have an `iframe` tag to which I didn't set `height` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears partially in such a way that constant scrolling down is needed to fully read it.
- ## Possible solution
- This reduced the scrolling in nearly 95%:
- ```js
- const iframeToWorkOn = document.querySelector("#prcf_iframe");
iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + "px";- ```
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- ## My question
- How would you solve that problem?
- I have an `iframe` tag to which I didn't set `height` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears partially in such a way that constant scrolling down is needed to fully read it.
- ## Possible solution
- This reduced the scrolling in nearly 95%:
- ```js
- const iframeToWorkOn = document.querySelector("#prcf_iframe");
- iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + "px";
- ```
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- ## My question
- How would you solve that problem?
#3: Post edited
I have an all default `iframe`I didn't set `height` to this `iframe` so it has a default height which is 150px (at least in Google Chrome).As a consequence, the `iframe` appears only partially so viewing all its content (and filling in the contact form it contains) requires constantly scrolling down.How would you suggest to solve that problem?- ## Notes
* I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- I have an `iframe` tag to which I didn't set `height` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears partially in such a way that constant scrolling down is needed to fully read it.
- ## Possible solution
- This reduced the scrolling in nearly 95%:
- ```js
- const iframeToWorkOn = document.querySelector("#prcf_iframe");
- iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + "px";
- ```
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- ## My question
- How would you solve that problem?
#2: Post edited
I have an `iframe` tag which contains a contact form.I didn't set `height` to this `iframe` so it has a default height which is 150px (at least according to my web browser).- As a consequence, the `iframe` appears only partially so viewing all its content (and filling in the contact form it contains) requires constantly scrolling down.
- How would you suggest to solve that problem?
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
- I have an all default `iframe`
- I didn't set `height` to this `iframe` so it has a default height which is 150px (at least in Google Chrome).
- As a consequence, the `iframe` appears only partially so viewing all its content (and filling in the contact form it contains) requires constantly scrolling down.
- How would you suggest to solve that problem?
- ## Notes
- * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).
#1: Initial revision
iframe tag is vertically scrollable although I would expect it to vertically stretch 100%
I have an `iframe` tag which contains a contact form. I didn't set `height` to this `iframe` so it has a default height which is 150px (at least according to my web browser). As a consequence, the `iframe` appears only partially so viewing all its content (and filling in the contact form it contains) requires constantly scrolling down. How would you suggest to solve that problem? ## Notes * I don't want to set arbitrary height to this `iframe` because it could cause blank areas on certain zooming levels and/or resolutions (?).