I have a multi iframe page. I produce a chart in JavaScript in each iframe where the title tooltip documents the chart content. All this works well except when the tooltip shows near the bottom of the iframe. In Chrome, Edge, and Opera this causes the iframe to scroll vertically. In FF and IE, no scrolling occurs. Of course, in IE the tooltip is always above the mouse position. I would like to prevent this scrolling from happening in Chrome, Edge, and Opera. I've tried several custom tooltips but nothing has worked yet. Any help is appreciated.
Thanks,
craigt
you can try:
.perent {
position: relative:
}
.tooltip {
position: absolute:
}
to prevent the tooltip from making the page scroll.
Related
We have a website fabulouslanzarote.com that has a navigation menu implemented using CSS3. The 'The Resort' and 'The Community' menu options have
sub-menus.
Recently it has been reported that these sub-menus are not accessible in Chrome. They appear when the top-level link is hovered, but disappear when you attempt to click one of the links.
We have not updated the site in a couple of months and they had been working following the last deployment, so maybe this is the result of an update to Chrome? The menus work fine in Firefox and Edge.
Does anyone know what is preventing the sub-menus from working properly in Chrome?
#Johannes is correct. The menu has a gap where, as you move your cursor over it, it loses the hover state. Try adding a transparent pseudo element on the ul.drop to fill the gap and keep the hover state as the cursor moves.
ul.drop:after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 27px;
}
Disclaimer: While I don't usually recommend using hardcoded values, your menu already leverages them. That's why I chose 27px. It fit based on the other hardcoded values.
I think they are just a little bit to far below the main menu: When you move the mouse rather slowly (and not exactly in the middle), you loose the "hover" state and the submenu disappears.
I'd move them up a bit and make that arrow on top a little bit smaller to avoid that situation.
I am a little nervous as this is my first post in this beautiful admirable community...
Here is my problem : I have a set of markers with infowindow on a map, using google maps API V3.19.
Some of the infowindow contents are bigger than size, so I want a scrollbar in the infowindow (not like many post who want to make the scrollbar disappear)
All my infowindow contents are inside a div, and I manage to put z-index on top everytime I open a new infowindow.
Safari and chrome : works perfectly;the scrollbar is on, and when I scroll with mouse inside the infowindow, the content of the infowindow scrolls down.
Firefox : if I scroll with cursor inside the infowindow, it is the map which zooms in or out, not the content which scrolls down. And it is hard to get the scroll bar, which is the only way to scroll the content.
All this on Mac OSx
Extract from my css : markerInfoWin is the class of the div wrapping the content
#map-canvas div{
overflow:scroll !important;
}
.markerInfoWin {
border-top: 12px solid;
width: 290px;
height: 300px;
overflow-y: scroll !important;
}
and javascript when I open an infowindow named infoWin:
var zindex = globalZindex + 1;
this.infoWin.setContent(this.contentInfoWin_);
this.infoWin.setZIndex(zindex);
$("#" + this.infoWin.divname).css('z-index', zindex);
globalZindex = zindex;
this.infoWin.open(kflowMap, this.markerCont);
Thank you if one has any hint, or if it is a firefox bug !
Best regards
OK, I have an answer.
It is a unfortunatly a "bug" in Firefox
https://code.google.com/p/google-maps-utility-library-v3/issues/detail?id=328
Very annoying...
Thanks everyone
I've ran into a nasty bug with Chrome and Safari on Mac. It appears that its related to font-smoothing and whether or not the page has an iframe with Flash inside of it.
When I remove the iframe the text looks like it is set to font-smoothing: subpixel-antialiased (browser default). But when the iframe is on the page (with Flash running inside of it) the text appears to be set to font-smoothing: antialiased.
Is there any work-around for this? Please see screenshots below.
I was having this problem too and fixed it like this:
.video1 { position: relative; height: 338px; width: 100%; }
.video1 > div { position: absolute; }
Then I placed the iFrame inside the second div. With the iFrame now in an absolutely positioned div, it no longer forces the text on the page to be antialiased upon page load in Safari.
I think I found an "ok" solution. I had a div that was slightly overlapping an iframe that had Flash inside of it. That overlapping div had it's font-smoothing screwed up. To fix it I just had to put z-index on both the iframe and the overlapping div. To make it work the iframe has to be on top of the div (higher z-index). In the example above it doesn't appear that anything is overlapping the iframe, but the boundary of each element could be overlapping slightly. You'd be able to see it by using the web inspector in Safari or Chrome. But I'd just start by putting z-index on the iframe and the elements that have messed up font-smoothing.
Hey my site works fine except in IE8. The page does not display a vertical scroll bar. I added html { overflow-y :scroll } to the css and only got a scroll bar which does not allow you to actually scroll down. My site is eagleview.it
Thanks very much
You can use this to fix on IE
-ms-overflow-y : scroll;
Or this may work as well
html {
height:101%;
}
I have an iframe with scrolling=yes. Is it possible to fully hide scrollbar using CSS for the Mozilla FireFox browser?
For instance, on the Internet Explorer I'm using this: Overflow-x: hidden; Overflow-y: hidden; - and it hides scrollbars, but FireFox ignores this CSS.
Here is screenshot from IE:
alt text http://moismski.com/ie.png
Here is screenshot from FireFox:
alt text http://moismski.com/firefox.png
I forgot to mention that I put CSS, to say exactly like this <style>body { overflow:hidden; }</style> inside the iframe. I can't put class to iframe itself like <iframe class="...">
Iframe is put inside the <DIV>...</DIV>. I use it like a modal window.
Have you tried setting explicit values for width/height on either the iframe or parent container? Also, does your iFrame contain anything?
EDIT:
Try:
div {overflow:hidden;}
div iframe {border:0;overflow:hidden;}
in your actual page that contains the div.
I've tried everything you said and looked at this two links either ( How to remove scrollbars from Facebook iFrame application - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.
What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).
I hope this help you.