I have an iframe and I need the scrollbars to be present even when content fits inside the iframe. so used overflow:scroll property . which works fine for FF, IE but not in chrome.
#iframeid
{
height:500; width:1150
}
#iframeid::-webkit-scrollbar
{
width: 12px;
overflow-x:scroll;
overflow-y:scroll;
}
this totally removes the scrollbars. Any thing I am missing ?
Use scrolling attribute in iframe..
<iframe width="150" height="150" scrolling="yes/no/auto"></iframe>
All the CSS you need:
#iframeid{
height:500; width:1150
overflow:scroll;
}
Works for me in Chrome:
http://jsfiddle.net/ukcG9/6/
Related
I am developing an ordering food widget for a restaurant website(Please see the attached picture below). I use iframe to display menus with scroll abled. And i have hide the scroll bar in css. But it is strange that there is a bar displayed on the right hand side and I have no idea that it is. Also, this bar appears only in Windows chrome, not in Mac chrome on safari.
To remove frame border use the below one.
<iframe src="myURL" width="500" height="500" frameBorder="0">Browser not compatible.</iframe>
Try this scrolling="no" or seamless="seamless".
<iframe src="..."
class="foo"
scrolling="no"
seamless="seamless">
</iframe>
The only Draw Back here is you have to use a Div Container outside the IFrame.
Tested in android and ios Device.
HTML
<div class="outerCon">
<iframe src="https://bing.com"
class="foo"
seamless="seamless">
</iframe>
</div>
CSS
.outerCon{
overflow:hidden;
height:500px;
width:600px;
}
.outerCon iframe{
width:inherit;
height:inherit:
overflow-x : hidden;
overflow-y: scroll;
}
.outerCon iframe::-webkit-scrollbar {
display: none;
}
DEMO
1.sencha touch 2.3.1
2.I Used iframe it works well on IOS7.x
3.When Upgrade to IOS8.1，Iframe can't scrolling
4.IOS8.1 in safari works well,but when send to home screen,and open it it can't work.
WHY?is a bug?
my iframe code like this:
<div style="-webkit-overflow-scrolling:touch;background:url(resources/images/loading.gif) center center no-repeat; height:500px; overflow: auto;">
<iframe src="/abc.html" width="100%" height="100%" frameborder="0" >
</iframe>
</div>
Try to set fixed height. Does it work?
Also, try to add:
overflow-y: scroll;
to your frame.
Its a known issue with 8.1. I am going through the same. Surprisingly, iframe scroll works fine in chrome but Safari has issues.
http://www.applevis.com/blog/apple-ios-news/accessibility-fixes-and-improvements-ios-81
I'm using a class inside an img tag to define the content of the img dynamically depending on the device resolution through css. For some reason this works great in webkit based browsers and Opera, but doesn't work in Firefox or IE.
Here's the HTML:
<img class="content" />
and CSS:
.content {
content:url(img.jpg);
}
Is there a workaround for those two browsers?
Thanks!
Hey I'm building a webpage that contains an iFrame in all other browsers it appears fine but when testing in ie7 I get a vertical and horizontal scrollbar, is there anyway to remove this?
<div id="converter3"><iframe src="https://postoffice.travelmoneyonline.co.uk/widget/(S(lwtb0t45hyhwv2z5sarusa45))/default.aspx
" frameborder="0" allowtransparency="true" scrollbars="no" style="height:279px; overflow:hidden;"></iframe></div>
#converter3{
float:right;
width:218px;
margin-right:12px;
margin-top:20px;
}
Thanks
Try appling these:
overflow: hidden; in CSS style for the <iframe>
scrollbars="no" as <iframe> attribute
So:
<iframe scrollbars="no" style="overflow: hidden;" ... >
UPDATE
It seems to have magically corrected itself because now it works, but I emphasize that it wasn't a cache issue because even I was able to update with new images but they always appeared "below" rather than "next to"... I don't understand...but suddenly it worked now.
if you check www.dodomainer.com in Safari and Chrome, the two images in the header float, but not in Firefox. Any idea how to fix this? Note, it's definitely not this way in Firefox as a result of a cache
this is the code that I use. Any idea how to fix the problem?
<div class="header a"><a href="http://dodomainer.com/">
<img src="http://dodomainer.com/images/dodo4.jpg" width="400" height="50" padding-left="10px" alt="dodobird" />
</a></div>
<div class="header b">
<a href="http://dodomainer.com/">
<img src="http://dodomainer.com/images/dodotest.jpg" width="380" height="70" padding-left="10px" alt="dodobird" />
</a>
</div>
CSS
.header {
float: left;
width: 400px;
}
.a {
height: 50px;
}
.b {
height: 70px;
padding-left: 100px;
}
There is no problem to be fixed here.
Your code should work in all browsers. I checked in IE, FF, Opera (all latest though). All good.
There are just 2 child divs with float:left.
Michael, i feel like you may have an overflow issue here regarding your padding and the various methods browsers compute the box model. Header A has a width of 400 but an image within of 400+the padding. Remove the padding or resize it's container to actually contain it. Other option is to set overflow to hidden
This looks fine in my FF and other browsers.
However, you may want to reduce the padding in
.b {
height: 70px;
padding-left: 100px;
}
That could be causing you problems.
EDIT:
The original problem may have disappeared because of padding-left:10px; that was added inline to the img. If that is removed, you may experience the problem again.