I want to remove the horizontal scrollbar in my iframe. I just need a vertical scrollbar to view the lengthy contents. My code is
<iframe height='514' width='790'
marginwidth='0' marginheight='0'
frameborder='0'
overflow-y='scroll'
overflow-x='hidden'>
</iframe>
Anyone please solve my problem. Advance Wishes.
In the iframe page itself, add this:
body {
overflow-x:hidden;
height:100%; //optional, but it can't hurt.
}
If you are using a browser that supports CSS3 you could use the overflow-x property.
#my-iframe
{
overflow-x:hidden;
}
Here is an IFrame-resize script.
However, if you use SSL then there is no way to use a script to communicate between the frame and the main window. It will give an "access denied". :-(
Try setting scrolling attribute to "no"
<iframe scrolling="no" ..............> </iframe>
The solution is:
style="overflow-x:hidden;
overflow-y:scroll;
in tag <body> of page included on iframe
SEE THIS LINK PAGE
Regards by Raffaele.
Related
Is it possible to remove the dotted outline from an iframe in Firefox?
Setting the outline property in CSS doesn't work.
HTML:
<iframe width="50" height="50"/>
CSS:
iframe { outline: 0 }
Here's a jsfiddle that reproduces this issue. http://jsfiddle.net/6sHkw/1/
Edit
Sorry guys, I wasn't clear with my question.
With the above jsfiddle, the dotted outline appears if you tab to the iframe. I would like to make it so that the dotted outline does not appear when you tab to it. Neither border: 0 nor frameborder=0 works.
Add the following
iframe {
border:0px;
}
jsFiddle works in all browsers.
The fiddle will be blank, as there is no src in the iframe.
The dotted focus outline is in the document inside the iframe, not on the iframe itself. You can see the same thing with the main browser viewport as well.
I don't believe you can turn it off via styles. It's an accessibility feature: if people are using tab navigation the assumption is that they want to actually see where they are in the tab order. Otherwise it quickly gets completely unusable.
you can also set it from the markup (iframe has a frameborder property)
<iframe width="50" height="50" frameborder="0"/>
Working Fiddle:
Caution: this in no longer supported in HTML5, so use CSS styling instead (like the other answers)
I'm using gigya service for video embed...
If some one paste the following code in his wordpress page or post then horizontal and vertical scrollbar is displaying only in IE browsers....Working fine in Firefox and Chrome..
Here is the code:-
[gigya src="http://s.asstatic.com/player.swf" width="425" height="354" allowFullScreen="true" wmode="transparent" flashvars="file=fb=0&nb=1&ap=0&pl=as&c=#dfdfdf&p=1615781_634907097231053940"]
Please help me what should i put in the above code to remove the scrollbar displaying in IE only...
and here is the links.. please open it in IE8 or IE7...
http://gauravishere.wordpress.com/2012/12/27/test/
Thanks...
position:absolute' works for me...
[gigya src="..." style="position:absolute" width="425" height="354" allowFullScreen="true" wmode="transparent" flashvars="file=fb=0&nb=1&ap=0&pl=as&c=#dfdfdf&p=99..."]
try to fix this type of issue by:
Use html5 doctype if possible:
Set 100% on all parent containers:
*, html, body { height: 100%; width:100%; margin:0; padding:0; }
I am working on this site for a client of mine.
Issue is that the dropdown menu on the home page hides behind the embedded youtube player. It seems to be a simple css problem involving z-index but I have been unable to solve it. Maybe it has something to do with the youtube embed.
I have tried to set the z-index of the menu but it does not seem to be effective.
I almost forgot to tell you that the problem occurs on IE9 specifically.
Also, I'm not a css expert so please just point out what the issue is.
Use below code for youtube iframe:
<iframe width="597" height="323" src="http://www.youtube-nocookie.com/embed/Rahab_AMCkE?wmode=transparent" rel="0" frameborder="0" allowfullscreen=""></iframe>
Add wmode=transparent" just after the source(src) of video
This is a Flash issue. When embedding Flash, the default is wmode=window, making the SWF overlay any HTML object on the page. To avoid that, use wmode=opaque or wmode=transparent which allow HTML elements to overlap SWF content. For more info and the difference between the two see Adobe's help.
Define your css style like this.
.navigation ul ul{
z-index:3;
}
.lcd{
position:relative;
z-index:1;
}
use
_z-index:1000001;
do not remove
z-index: //whatever;
I am trying to remove the iframes scrollbars and frameborder. I cannot use frameborder=0 and scrolling=no since they are no longer supported in HTML5. The seamless attribute throws a warning stating it isn't yet implemented according to the W3C Validator. I found a page online that said to use overflow:hidden to remove the scrolling, however it is not removing the scrollbars, at least in my google chrome. I haven't checked other browsers. Also the frameborder is still there, even though I used border:none. I also was trying to set the width and height of the iframe using css, however it didnt want to listen. Here is my current code:
#vidframe
{
width: 577px;
height: 358px;
overflow: hidden;
border: none;
}
<iframe name="videoframe" id="vidframe" src="video1.html"></iframe>
Yeah, I easily could add width=xxx height=xxx into the iframe tag, but my understanding that with HTML5 the goal is to get AS MUCH of the coding into CSS as possible... So shouldn't I be able to set the iframes width and height in the stylesheet? Again, overflow hidded didnt remove the scrollbars... and border: none didnt remove the borders...
The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source code of, then use javascript to appent the overflow hidden attribute to it's body.
Remove iframe border and scroll bar using javascript,see the following link...
How to remove border from iframe in IE using javascript
i have an iframe nested inside another iframe, and for both iframes i have these attributes:
frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no"
Ive also tried:
style="border: 0px; margin: 0px; padding: 0px;"
It seems that no matter what I try, the border of the inner iframe keeps showing, as well as the padding within the inner iframe. This is also only the case for IE (v. 8), for firefox it works fine and shows no borders.
Is there any way to get rid of this?
Capitalize the letter B in "frameborder"
<frameBorder="0" ... >
It's an IE thing...
use frameborder="0" attribute:
<iframe frameborder="0" src="..." />
Unfortunately, do not know, how to set this using CSS.
I've spent so much time busting my head over this one :)
If you have not defined any values for the DIV in which your IFRAME is located, a border appears by default. I usually put my IFRAMEs in the body section of a separate HTML file. I add this line of code in my CSS file and boom! Problem solved.
body {
padding:0;
margin:0;
}