I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.
Update
This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.
Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.
#myMap_canvas img {
max-width: none;
}
fixed it for me, but I also wanted to point out the comment on the question by #Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.
Setting it back to map_canvas fixed it without the max-width change.
<div id="map_canvas"></div>
If you're using Bootstrap, just give it "google-maps" class. This worked for me.
As an alternative you might reset everything for the google map div as a kind of last-resort solution:
HTML:
<div class="mappins-map"><div>
CSS:
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
Just share #Max-Favilli answer:
With latest version of google maps api you need this:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Thanks to #Max-Favilli
https://stackoverflow.com/a/19339767/3070027
If you're a Twitter Bootstrap user you should add this line to your CSS:
.gmnoprint img { max-width: none; }
I had this problem as well and using
.google-maps img {
max-width: none;
}
didn't work. I eventually used
.google-maps img {
max-width: none !important;
}
and it worked like a charm.
If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:
.google-maps img {
max-width: none;
max-height: none;
}
As far as I can tell, Pure CSS has no way of fixing this issue on its own.
Those options you guys told me didn´t work for my website.
I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy
I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!
I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).
The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:
http://page URL width="900" height="950">
If you change the dimensions, remember to change it in both arguments above, or you get weird results.
There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/
Related
This is an issue on Firefox and IE so far that I've tested; the problem does not exist on Chrome.
I'm including two TinyMCE editors on a page with one partially off-screen to start. When I select the color picker dropdown option from the toolbar on the first TinyMCE instance, the dropdown appears where it should. But if I scroll down and select the color picker dropdown in the second instance, that dropdown appears way below the editor and typically off the page.
You can see this in action here: http://jsfiddle.net/nm6wtca3/
Without removing the html, body CSS, what can I do to have the color picker always appear in the correct position?
I've traced the problem down to setting CSS on the html, body elements.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
The dropdown div has CSS applied to it that is auto-calculated by TinyMCE. It looks something like this:
z-index: 65535;
left: 641.467px;
top: 633px;
width: 162px;
height: 105px;
How it appears in FF (sometimes way worse):
How it appears in Chrome (how it should look):
You did say you don't want to remove any CSS from the html,body, but you didn't say anything about adding to it! This solution is based on the assumption that you can add to the html,body
Solution
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
position: relative; /* Line added */
}
JSFiddle Example
I hope this helps. In all reality, you really only need to apply position: relative; to the body like so body { position: relative; }
I'm not super familiar with tinymce's colorpicker, but I can see the issue, and I can replicate it reliably: your problem occurs when you have a picker open, and then you scroll. I can replicate this in chrome too. Here's a video.
When I look at the DOM, I see that tinyMCE has created two absolute-positioned divs at the end of document.body, one for each picker. When you open one, their position is updated to reflect the location of the toolbar-button at the time you clicked it, but it never gets updated when you scroll!
So, how to solve this? Well, there are a few possibilities:
Option 1: it looks like tinyMCE provides a method to bind a control to an event (here). With this, you could bind a callback to 'scroll' that repositions the box...
Huh, now that I think of it, you could simply close any open colorpickers whenever a user scrolls ... kinda feels like a cop-out but there's no denying it has the best R.O.I. ;) We'll call that Option 2!
Option 3: depending on the implementation of the colorpicker, you may be able to override where in the DOM those divs get rendered. The API method I saw that looked the most promising is here. Once you have the div inside a relative-positioned parent, you'd also have to make the colorpicker's positioning algorithm smart enough to look in the right place for x and y offset ...when I tried this by just moving the element and mashing in some css by hand in chrome-console, the algorithm still computed x and y offsets based on doc.body, so depending on where you were scrolled at click-time, everything would be out of position
It looks like this issue might be troubling other people as well... maybe they've found a solution but haven't posted anything about it?
I hope this is enough info to get you past the problem... Let me know if you have any questions!
It looks like the problem is caused by overflow-x: hidden;
It may not be the answer you want but removing that or moving it to a page wrapper will solve your problem.
Working Example
html, body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#pagewrapper{
overflow-x: hidden;
}
Another option would be to force repositioning on scroll, but honestly this is overkill... I strongly recommend fixing the css instead.
Another working example
$('body').scroll(posfix); // when the body scrolls
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button
function posfix() {
setTimeout(function () { // hack way to ensure it fires after the menu is shown
$('#mceu_51').css({
top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
});
$('#mceu_52').css({
top: $('#mceu_35').offset().top + $('#mceu_35').height(),
left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
});
}, 1);
}
it works on firefox, and Internet Explorer fine
just remove this css code
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
Please take a look at this:
html,
body {
width: auto;
height: auto;
overflow-x: hidden;
}
You can simply set body width and height to auto, then there won't be any need to use position and you don't have to remove anything. I think you do not need to use height: 100% since it will be auto-calculated by TinyMCE. i hope it helped.
Update
Look at the screen shot from chrome and its same in firefox. And i didn't remove any css but just changed..and by putting 100% in css the output will be like :-
Please check this one with auto but not 100%..thank you
I have a JQuery autocomplete search box which when displaying the search results in the dropdown window appears behind a JQuery dropdown menu directly below it (see image). I have tried increasing the z-index value of everything I can find in the CSS for the autocomplete search but it still doesn't fix the problem. What else should I be trying?
Fiddle link: http://jsfiddle.net/tonyyeb/LKDBh/18/
Thanks for everyone's contributions. I have since found a solution given to me by a forum user:
The autocomplete wrapper is being given a z-index of 1 by the jQuery library (hard-coded), >whereas the menu (via CSS) has a z-index of 100; easiest solution is to use -
.ui-autocomplete {
z-index: 100 !important;
}
I had a similar issue with a website recently and I've fixed this with the following method:
Make sure that you position both elements absolute OR relative (z-index only works when you use the 'position' css element. So you should either use position: absolute; or postion: relative;. That totally depends on your code/css. When you don't use the position element right now, you should probably use the position: relative; element since the position:absolute; element will position the referring element absolutely which will probably screw up your layout).
Then make sure you give the dropdown a z-index which is lower then the z-index for the menu.
Example
.search-dropdown{
position: relative; or position: absolute;
z-index: 1;
}
.jquery-menu{
position: relative; or position: absolute;
z-index: 2;
}
Now, you've added
position: relative;
z-index: 1;
to .ui-widget.
Remove it there and add it directly to the dropdown's css which appears when you enter something in the input field (Chrome/Firefox: Right Click on the dropdown and inspect element to see its class/ID).
Hope this helps!
A few months ago I had a similar problem, and searched the web.
The solution was in the CSS styling.
I added an inline class (ui-front) to the element that holds the autocomplete input element.
Not sure it will solve your problem, but it's an easy experiment.
Best of luck!
Question has been posted long time ago. Still, i also have a solution that works and not listed till now .
just add this on top of your page and problem should be solved.
.pac-container { position: absolute; cursor: default;z-index:3000 !important;}
i am implementing a Location Picker like this one:
http://m.rhinvivant-lebendigerrhein.eu/geopick.php?raz=1
But when I load the code in my environment the Location Marker is suddenly small and squashed after loading the page (see image1). Then after i dragged the Marker around, it gets even smaller (see image2).
Has anyone seen something like this? It would help to get a hint how i can work around this, or what mistake i made.
i.e. How can i fix the size of my markers?
My code looks like this:
var marker = new google.maps.Marker({
title: settings.gMapMarkerTitle,
map: map,
position: defaultLocationLatLng,
draggable: true
});
The Problem was indeed a CSS setting. I am using the zurb foundation framework, which defines max-width for all images.
max-width: 100%;
Fixed it, by adding my own css class to the map div. It overrides the max-width setting and the Markers are back to normal.
<div id="gmap" class="map_canvas" />
.map_canvas img {
max-width: none; // just in case it does not work... add !important;
}
Thanks Dr. Molle for the Hint...
Works without !important, and !important should not be used if it doesn't need to be.
.map_canvas img {
max-width: none;
}
I'm using a jQuery plugin called Supersized to display images in full screen.
You can see a sample here (on homepage): http://mysampleconcept.com/situs4/
If you try to shrink the screen, you will notice that the image will resize too, however it may shrink too much that the image will look bad.
The same plugin is used here as well: http://mysampleconcept.com/situs3/; however, the resizing is done differently so the image doesn't go out of proportions.
I have tried to compare the plugins settings on both sites and they both seem to be similar.
I have tried setting the image width and height to 100% !important in my css and it didn't help.
Any suggestion on how to achieve the same behavior?
The issue is from the common css that does your image all base on "max-width:100%".
Check your css reset if there is something like
img { max-width: 100%; }
The supersized official has a solution for the file "supersized.3.2.7.js":
https://github.com/buildinternet/supersized/issues/103
If you can not solve it by following the official solution, try only add this in your supersized css:
#supersized img { max-width: none; }
this tricky is by http://blog.valderama.net/node/30
When I removed
#supersized img {
width: 100% !important;
height: 100% !important;
}
it seems to work.
Although not an optimal solution, I was able to solve this by adding min-width and min-height to the supersized image
I'm trying to get hover effect similar to this example. But couldn't get it. Here is the link
Your <script> tag references a jquery-1.2.6.min.js which does not exist. Put that file in the same directory as hovereffect.html on your web server.
Or, perhaps even better, get JQuery from Google Libraries:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
It looks like the code copied to the new page is missing the position:relative, which would fix the issue. Now, for security, you may want to limit the height of the block and set the overflow to hidden.
On test page this is your css:
.thumb {
list-style: none;
float: left;
background: white;
width: 250px;
position: relative;/* this makes all the difference */
}
On production page:
.project .thumb {
width: 260px;
float: left;
}
Add position: relative to .project .thumb
The reason it's not working is because you are missing a css property
.project .thumb img {position:absolute}
notice that you have this line in your test page.
the way you are using jQuery's animate function to change the position of the top image {top:150px}, so you need make it absolutely position for this to work.
Also the .project .thumb a line is missing it's width and height.
Also note that if you just add that line, the affect still won't be the way you expect. Create an outer div with an overflow:hidden.
You want to specify height:150px; on your outer class (.outer). Currently it's set to 250px which is too tall.
Its because in your real project your css is in the /css directory. So your CSS style is looking for /css/images/snbw_thumb.jpg which doesn't exist. Change your CSS style to ../images/snbw_thumb.jpg and it should fix it.
Your image is 404ing due to your css rule for .project .thumb a{}
It points to "images/snbw_thumb.jpg" but you'll likely want to use "/images/snbw_thumb.jpg"
Bad URL : http://dragonfly.zymichost.com/css/images/snbw_thumb.jpg
Good URL : http://dragonfly.zymichost.com/images/snbw_thumb.jpg
(Also, it looks like your pages aren't really serving 404s as the bad URL )
Hope this helps
-Chris