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
Related
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.
Problem
Open https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/ on iPhone and the second iFrames div content ist not shown before tapping/scrolling.
Video: https://youtu.be/opEx0HMBvWc
Details
I have a widget <iframe> that is rendered below the page fold on page load.
<iframe class="iframe" src="widget.html"></iframe>
It is loading a site under my control, where I want a sticky/fixed element on top and momentum scrolled content below. Because of the fixed element I can not apply a wrapping div in the parent page and simulate the scrolling as described here https://stackoverflow.com/a/32993873/9619535.
The alternative is to make the iframe scrolling inside with position:fixed etc. as described here: https://github.com/PierBover/ios-iframe-fix / https://stackoverflow.com/a/54988720/9619535
But the content of this div is not rendered if the iFrame is out of view on page load. Only after the first touch the content appears:
https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6
Debugging
Using XCode Simulator the bug can also be reproduced. With Safari Inspect the element is there and all css seems fine:
Workarounds!?
The bug does not appear when using -webkit-overflow-scrolling: auto; instead of touch, but the momentum scrolling is desired / essential for the haptic usability.
Related questions
Also linked here: https://github.com/PierBover/ios-iframe-fix/issues/5
These solutions didn't help:
Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone -> webkit-transform: translate3d(0, 0, 0); did not change it
Safari ios iframe blank screen on rotate -> no display:flex is used
The problem came from https://github.com/PierBover/ios-iframe-fix 's position:fixed;top:0px etc.
The same can be achieved with height:100% on the wrapper, and than the bug doesn't occure:
.scrollable {
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch;
}
via https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios
First setting -webkit-overflow-scrolling: auto; and then switching to touch after the first touch seems to work 90%:
<script type="text/javascript">
const el = document.getElementsByClassName('scrollable')[0]
const settouch = (e) => el.style.webkitOverflowScrolling = 'touch'
el.addEventListener("touchend", settouch, false);
</script>
But 10%: if the iFrame is rendered below the fold and the user scrolls upwards where the iFrame does not react (already on top of page), the containing page will scroll, the touchend will fire and the div will not be rendered anymore.
See video here: https://youtu.be/opEx0HMBvWc
BACKGROUND: I have a desktop browser app that uses mapquest with the leaflet js plugin. I am using divIcon class for the markers, which allows me to use custom HTML and styling for the markers. Each divIcon marker also contains a hidden div that displays when the marker is hovered over (using :hover class). I am using neither the default marker or default popup built into leaflet, because custom html gives much better control over styling.
PROBLEM: When the popup is showing, any other markers on the map show on top of the popup, instead of underneath. I have tried setting z-index of the popup div to a really higher number, but it does not help.
WHAT IS EXPECTED: When you hover the mouse over an icon, the markers should be behind the popup, not in front.
THIS IS NOT A DUPLICATE QUESTION: This question is not the same as this one. That question was about having the default leaflet popups stay on top of a custom div that is outside of the map z-index context. This question is about a custom mouseover popup (not the default popup) staying above other markers. Plus, my solution is completely different from the admittedly javascript "hack" put forward as a workaround.
WORKING EXAMPLE OF PROBLEM: https://jsfiddle.net/mrrost/py2bqw7j/
Here is what divIcon code with custom marker/popup looks like:
var pin = L.divIcon({
html: `
<div class='marker'>
Pin
<div class='popup'>
Marker info. Other markers WILL BE on top of this div.
This is BAD and a PROBLEM.
</div>
</div>
`,
});
This most important css definitions:
#map {
position: fixed;
}
/* hide default leaflet pin; div.popup is put inside here */
.leaflet-marker-icon {
border: 0; margin: 0; padding: 0;
}
div.popup {
display: none;
position: absolute;
}
div.marker:hover div.popup {
display: block;
}
The solution was to better understand how z-indexing works. The popup is set inside the marker (to make is work with just css :hover), so it is the child of the parent marker element. Z-index is inherited from parent elements, and child elements cannot have a z-index higher than its parent. That's just how z-indexing works. So, setting z-index on the popup element is ignored by the browser, because leaflet has set a z-index for the marker.
The fix was to use a css rule that tells the browser to lower the z-index of all other markers, when a marker is hovered over:
.leaflet-marker-icon:not(:hover) {
z-index: 0 !important;
}
See here for a full working example:
https://jsfiddle.net/mrrost/tdr45764/
Leaflet markers have a riseOnHover property, which makes the marker appear on top of other markers on hover.
const marker = L.marker([50.5, 30.5], { riseOnHover: true }).addTo(map);
See https://leafletjs.com/reference-1.6.0.html#marker-riseonhover
I read some question before but could not find out the answer solved this problem at all. I have to area one of this contain an iframe and other display player to play music. I'm using margin auto and It's work fine but not for scroll bar vertical.
I am trying to always display scroll bar but in some case the content short enough to not display scroll bar.
I'm trying javascript solution:
var w = window.innerWidth;
if(!w){
w = document.documentElement.offsetWidth; // for IE
}
var outsize = parseInt(Math.round((w-1000)/2));
$("#body-content").css({'margin':'0 '+outsize+'px'});
$("#player",parent.document).css({'margin':'0 '+outsize+'px'});
get the width of the window and re-margin the content and the player. But at the first time It's slightly move few pixels. It's look very ugly.
Anyone here have the difference solution for this, pls help me!
does the following added to your css file help?
body {
overflow-y: scroll;
}
it should always display the scrollbar, greyed out if the content is smaller than the screen and active when the page gets higher.
I made in GWT custom modal message box. It has also bottom layer. This means that I expect restriction of any user action at the page except clicking 'Ok'.
I made something like this (click on the 'show dialog box').
I have made bottom layer that covers all bottom controls. It has style:
.glass {
background-color: #000;
opacity: 0.50;
-moz-opacity: 0.50;
filter: alpha(opacity = 50);
width: 100%;
height: 100%;
}
But the problem that in firefox user can click middle mouse button and scroll away, to the area that bottom layer will not cover.
In GWT i disabled scroll. It helps in IE, but not in FF.
Window.enableScrolling( false );
How to disable middle mouse scroll for short time?
Or i can make CSS for panel that will cover also hidden page area?
Thanks for any help!
and Sorry for my english.
There's a GlassPanel in the Google Web Toolkit Incubator - you might get some ideas from there (they didn't solve/restrict the middle button, just extended the panel to cover the whole page, including the hidden area).