My google map api v3 infowindows are displaying differently (just noticed today). The background is transparent and the width is very narrow. Using v3 maps api. I have 2 sites and both have same results, neither were changed in the last couple of days. infowindow.js has last-modified: Tue, 12 Feb 2019 18:33:17 GMT
Anyone else?
14 February 2019
Version 3.36 of the Maps JavaScript API is now available. See the Versioning guide.
Changes:
New features added:
You can now change the size of map controls, using MapOption.controlSize.
You can now restrict map bounds, using MapOptions.restriction.
Infowindow has been improved.
The weekly channel was updated to version 3.36.
The quarterly channel was updated to version 3.35.
Version 3.34 is still available when requested by number.
Version 3.33 was deleted, and can no longer be used.
On the plus side...they finally made the infowindow responsive.
But if you're one of the many who customized their infowindow via css and max-widths, you have to go back and fix it now.
They do still support max-width, but is now responsive.
Info Window with maxWidth
Info Window (updated)
Google just updated their Maps Javascript API (days ago) to more firmly restrict InfoWindows. It seems they have gradually been taking more control over InfoWindow widths. You used to be able to use the maxWidth property in InfoWindow options, but in my tests that started being ignored (as a way to widen default infowindow size) in version 3.34. A previous workaround was to specify v=3.33 in the Google Maps URL, but that just stopped working.
I opened a ticket with Google about this in October but it never went anywhere.
I am not aware of any way to override InfoWindow width currently. They are suggesting people use custom popups.
If your issue is the default max-width set by google maps on all infowindows, you can work around that in css:
.gm-style-iw div, .gm-style-iw {
overflow: hidden !important;
max-width: 9999px !important;
max-height: 9999px !important;
}
This, in esense, ignores the inline max-width and overflow styles that google maps puts on their infowindow boxes.
Related
I am trying to use the default_marker and/or secondary_marker in mapbox-gl.js however it appears they have been removed from the sprite.json in streets-v9 (probably v8 too). I've found a working example in streets-v7 where they were part of the sprite.json/sprit.png, but they are gone now.
How can I get these back or what is the new replacement? I've gone through the new sprint.png but I don't see anything similar.
Apologies for the change, ongle! We've recently worked to standardize the icons available across all the Mapbox styles which, unfortunately, required some breaking changes.
The closest replacement to default_marker is marker-15. The appearance of this marker will be different per style.
You may also choose to upload your own marker image per this guide.
I have made a website with Foundation-master wordpress theme, it looks good but I dont like how its behaving in other browser widths. Is there a way of making it non-responsive, or fixed to a certain width?
Thanks!
Sometimes it's necessary to deactivate the responsive features. For example if, like it happened to me twice already, a website is launching non-responsive and the optimization for smartphones/tablets is added later.
Foundation is an awesome framework even if you take out the responsiveness. The SCSS files are very well structured it comes with a library of very useful UI elements. It's a great choice for responsive and non-responsive sites if you ask me. Some people might also want to streamline their workflow and not jump between different frameworks depending on the project to keep costs low.
Anyways, here my two cents. This deactivated all responsiveness for me:
.row {
width: 62.5rem;
}
And then in the _settings.scss
$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);
This way we're essentially always seeing the large version. As far as I can tell this even works for top bar etc.
Foundation was built to simply create responsive websites.
Beside of the question why you use this framework if you don't want a responsive webseite, it's only possible if you start removing all the media queries in foundation css and by removing the viewport meta tag.
Maybe you should better invest this time to make your webseite responsive so that it also fits on smaller screens and mobile devices.
Although the question is marked as answered, I just wanted to give you a quick hint to prevent the Foundation 4 grid to act responsive, since we had also to deal with that.
In our case (SASS version) setting the width of the <body> element via css to the specific width of the grid and reducing the breakpoint in the SASS variable $small-screen to 1px worked fine.
Try to add a min-width in the body attributes like this:
html,
body {
font-size: 100%;
min-width: <value A>;
max-width: <value A>;
width: 100%;
}
(foundation.css)
Is there a way to style Tooltips in Google chart API? I've managed to only change the color of text using tooltip.textStyle. So is there any solution to change the white background to some other color (as shown on picture):
Test playground http://jsfiddle.net/nyNAg/
I found a solution through serendipity:
<style>
path {
fill: yellow;
}
</style>
Anyway, I did not find any configuration option for background in the google charts API.
Enable the tooltip to be handled by the HTML by writing this code in your options of google charts
CODE: tooltip: { isHtml: true } (,) add a comma if needed. :)
Now you can style tooltip using HTML and css. :)
/CSS Styling/
To style the tooltip box :
div.google-visualization-tooltip {}
To style the content like font size, color, etc
div.google-visualization-tooltip > ul > li > span {}
Use !important whenever needed ;)
http://jsfiddle.net/nyNAg/66/
It's possible to completely replace the label with custom HTML. It's maybe a bit complicated, but gives you full control of the content and style. See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
As the Google Chart Tools API implements its SVG charts via an iframe hosted on it's servers, as per the Same Origin Policy you may not access or modify the content of another domain, unless via server-side manipulation prior to sending the client a response.
Given that, I'm not sure how you managed to change the text colour - perhaps a browser bug?
Another option might be to override inline-style rules e.g.
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }
http://css-tricks.com/override-inline-styles-with-css/
I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.
I am using the HtmlEditor Control included in the AjaxControlToolkit (patched version v62210 because I needed some of the included fixes).
Unfortunately the textarea in the Html Editor control is never displayed in Chrome and Safari (both latest version). It doesn't matter if there is text in it or not.
It does work on the AjaxControlToolkit Sample page with both browsers though.
Any ideas?
fixed it with the following css definition:
#ctl00_CR_TabContainer_TabPanelDetails_tbText_ctl02_ctl00
{
height: auto !important;
}
The selector is page specific but can be determined easily using Firebug.
Try to set this property of the editor:
InitialCleanUp = true
This should resolve chrome and IE9 postback issue also.
just define height and width in chrome browser, so text area will appear. as example.
height="300" and width="500" in Editor property.
Ok, I know this is a year too late, but I had this same exact problem, and I fixed it by setting the height property from the code-behind. I wasn't able to use #simmonw 's answer because I am adding mine to the page dynamically and I had no way of knowing what the selector would be named. Anyways, hopefully this will help someone.