I'm using Google Maps API v3 in my application. Maps Pan control isn't displaying properly on IE 10 and IE 11.
.
It's working fine on Chrome, Mozilla and IE8, IE9. I can't figure out the way to resolve it.
on Stackoverflow, a nearly similar question is posted here: Google Maps zoom control
but not solution is not application. Definitely, it's the CSS issue, but I couldn't resolve it. I've checked in IE developer tool for any css class overriding, but no luck.
Have anyone faced the similar problem or anyone had any solution for this?
EDIT: The basic map is also disordered in my IE 11 version.![enter image description here]
-- Anil
Well, as #geocodezip suggested, it's a bug till today in Google map API and best solution for it is to use css.
use below css on the page :
.gmnoprint div[title^="Pan"]
{
filter:alpha(opacity=0)!important;
}
hope it would help others and save time.
-Anil
I just added the styling to my CSS , and fix
.gmnoprint div[title^="Pan"] {
opacity: 0 !important;
}
An important addition to non-English localizations:
You must use in style not "Pan", but the text specific to your locale. For example, for Russian localization - "Пан".
Hover your mouse on a button of pan Control and look pop-up hint. In style the first 3 letters from it are used.
FWIW - I've found that the above CSS isn't enough because we next get "+" for zoom in/out for street view. I made a slight modification...turn off all title items except the one we don't want hidden.
.gmnoprint div[title]
{
opacity: 0 !important;
}
.gmnoprint div[title^="Exit Street View"]
{
opacity: inherit !important;
}
Late to the party I know, but when I came across this issue I implemented the following fix for my applications using Google Maps V3 which I know is similar to what has already been posted here, but just in case it helps as I know how damn frustrating these sorts of issues can be!
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
<style type="text/css">
html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
{
opacity: 0 !important;
}
html[data-useragent*='Trident/7.0'] div[title^="Pan"]
{
opacity: 0 !important;
}
</style>
Related
Today I was adding a Call To Action element in elementor and I set an image as the background and I changed the border radius to 5 (Under advanced> border> radius) and the border appears rounded on the editor and the preview but when I view the page from my device (iPhone) the image in the call to action is not rounded like it appears in the editor or preview. I tried playing around with it and I figured out that the border will apply if you have a color as a background of the call to action but will not apply if you have an image as a background. I've had the same issue before with the Slides Widget however I was able to resolve this by using some CSS
selector .swiper-slide-bg, selector .elementor-background-overlay { border-radius: 20px!important; }
,that I found on this article: https://mcstarters.com/blog/add-border-radius-to-the-elementor-slider-element/ . I then tried to create my own code:
selector .elementor-cta-background-overlay {
border-radius: 20px!important;
}
But this did not solve the issue. This is not a plugin or theme conflict I created brand new websites with nothing but Elemntor and pro installed and still had the same result. If anyone is able to figure this I would GREATLY appreciate it as I've spent HOURS online trying to find some CSS to solve this with no luck. Even reached out to Elemntor support out of desperation but even THEY can't figure it out. Any CSS Code Would be appreciated thanks.
[These Are Some Images To Help]
[What Elemntor Preview Looks Like]: https://i.stack.imgur.com/D7DiF.jpg
[What it looks like on my Device]: https://www.icloud.com/photos/#0e6G2hxKFShWs5dENCe5VGfpg
This worked for me:
.elementor-cta .elementor-cta__bg-wrapper {
border-radius: 12px!important;
}
The Person Icon that represents the Street View on Google maps seems to be having issue on my insert. I am using the v3 api and The Icon placement is there but the icon seems missing or distorted.
If you look at the image something is there but it disappears on hover. Any ideas what could cause this.
I believe its could be to do with some of my pages code as if i do a vanilla version it seems ok, but i am not targeting this at all and was wondering if anyone else has come across this and might have an idea etc
This is definitely a CSS issue. Look for CSS that is applying to all images like:
img {
max-width: 100%;
}
Select only Google Maps and keep the rest of your site responsive
.gm-style img {
max-width: none;
}
Just set:
img {
max-width: none;
}
I'm using svg's as background-images for a responsive layout that recreates a complex brochure in online format.
Everything works perfectly for vector objects however if I embed images on the svg they don't appear on the background.
The strangest thing is if I check the svg on its own, the images are there, so this is kind of annoying!
Does anyone know if it has something to do with the svg configuration or something like that?
How can I solve this and still be able to use the svg as a background-image (background-size:cover rules!)?
Oh I should add that I've seen this "phenom" happen on chrome in my mac, if it's browser specific please say so!
The svg in question is this: http://nonstoptrip.limsomnium.com/img/fundoinfo1.svg
Unfortunately I'm not much of a jsfiddler so I couldn't create something to show you all.
Thanks in advance!
The images will appear if you load the svg at the document level. You can remove this element later and the images won't disappear. You can set it to load into a 1px x 1px element...
function loadSVG(svgpath){
if( /webkit/gi.test(navigator.userAgent.toLowerCase()) ){
var obj = document.createElement("object");
obj.setAttribute("type", "image/svg+xml");
obj.setAttribute("data", svgpath);
obj.setAttribute("width", "1");
obj.setAttribute("height", "1");
obj.setAttribute("style", "width: 0px; height: 0px; position: absolute;visibility : hidden");
document.getElementsByTagName("html")[0].appendChild(obj);
}
}
window.onload = function(){
loadSVG("../img/mySVG.svg");
}
The author of this technique is Dirk Weber, here are more details: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/
Webkit simply doesn't support this yet I'm afraid. https://bugs.webkit.org/show_bug.cgi?id=63548 is tracking this issue.
#Duopixel, using just "image/xml" for the type attribute also works (I've only tested it in chrome) and doesn't cause a "Resource interpreted as Document but transferred with MIME type image/svg+xml" error (while "image/svg+xml" does). Hope this helps get rid of that annoying error in the console you may be getting!
Does anyone have an idea why the LinkedIn share button is not aligned with its own count box?
I am not meaning aligning it with other share buttons like Facebook or Twitter.
The LinkedIn share button is not aligned with its own counter box.
Here: http://www.bbi.net.br/galeria/gal1.html
Thank you
I was getting the same issue, diving a little deeper with firebug I found that I had a style on an anchor which was causing the issue. To fix it add:
.IN-widget a {
font-size: 100%;
color: inherit;
line-height: 1;
}
Please to check what is the version you are using for jQuery. Since LinkedIn Button is also using a jQuery Library, your own library may cause a conflict. Try to make your jQuery the most up to date.
Maybe helpful :
https://stackoverflow.com/questions/15388054/linkedin-button-goes-to-the-end-bottom-of-the-page
Good luck.
Using css-transforms on a YouTube embed renders the video black in at least Safari 5 and Firefox 4. Chrome 11 handles it just fine.
I've made an example here: http://jsfiddle.net/oskarrough/4vRzd/4/
I need the css-transform in order to do some fancy layout positioning. Is there any way, css or js, to hack it to display the video?
I am tackling the same problem right now. I am not doing any fancy css transformations, just scaling.
Although not working perfectly, I got the video to display by using the wmode=transparent option.
i.e.
<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>
Are you sure you can't use this instead:
iframe {
position: relative;
top: 100px
}
http://jsfiddle.net/4vRzd/5/
Or margin-top: 100px, or a negative margin on some other element?
Someone had to post this, because you didn't mention that they aren't viable options.
Upvote for lawrenceshen.
The wmode=transparent worked.
var player;
function onYouTubeIframeAPIReady() {
console.log("onYouTubeIframeAPIReady");
player = new YT.Player('gallery-youtube', {
height: '594',
width: '883',
videoId: 'u1zgFlCw8Aw',
playerVars: { "modestbranding":1, "wmode":"transparent" },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
For me, this problem only occurred in Firefox 4+ on Windows 7 and Windows 8. It didn't happen on any other browser or on OS X.
I spent hours stuck on this problem. I display YouTube videos in a modal which uses CSS3 translations to slide into view.
My solution was to remove the transform/transition classes once the modal has appeared.
Once I did that YouTube embeds appeared and no more empty black box.
More details: I use animate.css and add class="animated fadeInDownBig" to slide the modal down. Once it has reached its final destination, I remove those classes again.
It's a really strange problem which I hope Mozilla fix really soon.