I have tried to remove the min-height several ways from this iFrame. But none of them work. I can't find my answer online so I have resulted to asking the question myself.
The iFrame I'm having trouble with is on this webpage:
https://www.prolifedistribution.co.uk/procast-i103
The iFrame is the anchor embed. As you can see, you can scroll on the iframe as it has a unwanted space at the bottom. I can't leave it there and revert back to showing it, as it's just too big and I need to add other anchor iFrames underneath.
Let me know what I should try and I will see if it works.
The problem is that the content inside the iframe has a min-height value set to 300px, so thats why the scrollbar appears. Since you don't have access to Anchor's code, the only way to fix this is to disable scrolling on the iframe. One way to do this is to add the scrolling="no" attribute to the iframe. This is not valid in HTML5 though, but browsers still support it.
Related
One solution was setting position of the iframe as fixed. But this messes up my web page.
If i understood your question right you want the iframe content to not scroll which is sadly not possible because you can't use Scripts on iframes.
We've implemented fancybox iframe popups throughout our system and it works great, but I've noticed these annoying horizontal scrollbars popping out on the outside of the frame. We get scrollbars where necesary inside our content area, but these ones just show up 100% of the time even when there's nothing to scroll. I've tried a number of things with CSS but have not had any luck thus far. Screenshot below to show what I'm referring to.
Any ideas?
https://ibb.co/88ZhBbX
EDIT: https://ibb.co/82bPxkd - image showing overflow being set to hidden on iframe and wrapper container.
I was trying to embed my code on my new google site but it looks like there is an extra scrollbar on the embed code section. At first I thought it was the size too short but after I have adjusted the size is still the same, I still can see the scrollbar from the embedded code section.
Does anyone know how to prevent this?
To disable scrolling for embed code, add :
<script>
parent.document.getElementsByTagName('iframe')[0].scrolling="no";
</script>
This changes the scrolling value of the parent iFrame ( scrolling="yes" ) to no.)
You can change the no to auto in the code if you want it to add scrolling automatically.
As #Vico said, you can remove the scrolling with the added but that will most likely just remove scrolling and not make your embed URL Responsive.
Unfortunately there is not a way to actually communicate your mobile environment from your google site to your embedded URL because the new google sites embed uses iFrame. The only work around would be to increase the size of your embedded container on your google site drastically. Once you do that you should be able to view your full webApp or what not on your site with no up-down scrolling but you may still see side-to-side scrolling. To remove that you van add
<body style="overflow: hidden;">
and it will be hidden.
Maybe this trick will help: Expand the inserted "Embed < >" box's boundary. (from
Auto adjust heigth of Google Site embed code (html))
It's pretty well known by now that you can style scrollbars using the webkit specific CSS tags (::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment, etc. ). However, I've noticed that I cannot style the scrollbars attached to iFrames.
Question: Is there a way to access and style the scrollbars on the iFrame using webkit? (Yes, I've actually got a particular scenario where I'd like to be able to do this.)
Thanks much in advance for any help!
The iframe scrollbars are actually part of the document inside the iframe. As a result, you have to set the scrollbar styles in the document you are loading into the iframe, not in the document that contains the iframe.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
fb like button creates a white background on page onload in all ie versions
I have a site where portions of the content are loaded into IFrames.
The problem I'm having is that the inside content of the iFrame is white until the page itself loads, and the content has a different background color (blue, in this case). So I have these white squares on the screen until the contents load.
Is there any way to specify what color the empty IFrame should render as until it has content?
Or am I taking the wrong tack here - is there a good way to keep the page from rendering until the contents are ready to be displayed?
UPDATE: Looks like the "white area" bit I'm describing is IE-specific.
It's not too hard:
<iframe id="IFR" src="time.php" style="background-color: #f00;" />
Edit: I neglected to test in IE -- it does work in FireFox. Example at: http://beta.tagcloud.com/contain.html
The example demonstrates that the page quickly switches to all red, and then when the iframe loads (in 5 seconds), it switches to black.
This was driving me nuts, but I actually found a solution that seems to work in IE6 and 7. Haven't tested in other browsers, but Firefox seems to do it properly anyway.
The problem is solved if the iframe isn't displayed when loading, but an iframe seems to fire the "onload" immediately so after putting in an alert, I noticed it fires the onload twice, once at page load, then again once the iframe page loads so...
<iframe id="theFrame" src="frame.html" style="display:none;" onload="loadFrame();"></iframe>
//and here is the associated javascript
loadCount = 1;
function loadFrame() {
if(loadCount > 1) { //this keeps the script from displaying the frame on the first fire
document.getElementById('theFrame').style.display='';
return;
}
loadCount++;
}
You could perhaps set the iframe's document and set its style before loading your content.
Or you can use Ajax and not have these issues. =] (Assuming if it's appropriate for the task, of course.)
Simpliest way to fix this to just not show the iframe until it is ready. That way you can set whatever background you want under the iframe. You set a background and prevent showing the iframe until loaded like so:
<div style="background-color:#XXXXX">
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
</div>
The only downside is if your visitor has js turned off they aren't going to see the iframe. If that is a concern for you check out http://css-tricks.com/prevent-white-flash-iframe/