Bootstrap distorts some Google Maps Controls and Overlays #1552

Closed
dcope opened this Issue Feb 1, 2012 · 35 comments

Comments

Projects
None yet

dcope commented Feb 1, 2012

This looks to be an issue introduced in 2.0.

If you look in the 2.0 example below you'll see that the zoom and street view controls become corrupted. When the marker is clicked, the infobox for it is also messed up.

Bootstrap 2.0 - http://jsbin.com/obilec/

No Bootstrap - http://jsbin.com/obilec/2/

Bootstrap 1.4 - http://jsbin.com/obilec/3

splaice commented Feb 2, 2012

This is because bootstrap sets max-width on img to 100%. I fixed this for myself by setting max-width to none for my map_canvas.

Example:
#map_canvas img {
max-width: none;
}

Owner

mdo commented Feb 2, 2012

Whoa, very curious. I'll check this out shortly. Is it an issue if we punt the max-width to our responsive layouts instead of applying it so generally?

dcope commented Feb 2, 2012

@splaice Yep that does it. Thanks!

@markdotto Putting it only on responsive layouts would at least reduce the amount of people that need to work around it...

Hey same issue.
I looked around and found out it is this definition causing the issue :

img {
  max-width: 100%;
  /* ... */
}

I don't know why it is there but if you remove it you don't have the issue anymore...

dyve commented Feb 8, 2012

Yep, just ran into this as well. Fix seems to work.

yogoo commented Feb 8, 2012

Same issue, same fix here. It breaks Google Maps sprites added via an tag.
The style is in reset.less L78 (bootstrap 2.0).

@markdotto: including it in the responsive layout would cause the same issue as soon as the map goes responsive.
An alternative would be to create a utility class such as:
.reset-img-max-width img { max-width: none; }
and to document that it should be added to any Google Map canvas.

dyve commented Feb 9, 2012

My preferred solution would be to lose as much of the global styles as you can. If you read the reasoning to keep responsive outside of the general CSS, it would appear that another logic has been used in building the core CSS, at least as far as this issue is concerned.

@markdotto I'd start by figuring out why this global style is necessary. Considering the differences in interpretation of "100%" across browsers, and the fact that IMG is one of the most common tags, I'd advise extreme caution. At least document the need for it. To put it in other words: what do we break if we lose this img { max-width: 100% }

Keep up the great work

righi commented Feb 20, 2012

Just chiming in to add myself to the list of people who have been bitten by the max-width: 100% global style. I'm developing an application that has an image zoom feature, and it took me about an hour to figure out why my code was working in Firefox but stopped working in Chrome.

I fixed the problem by overriding the max-width attribute on the only page in my app where it mattered, but I would also prefer that this wasn't a global style.

Thanks!

@righi I think the fix of @splaice is the best. Put the max-width at none only for map-canvas.

Here is his fix :

#map_canvas img {
  max-width: none;
}
Owner

mdo commented Feb 21, 2012

Resolved in 2.0.2-wip—moved the max-width to the docs.css only.

mdo closed this Feb 21, 2012

nodrog commented Mar 7, 2012

there is also an issue with the dropdowns for terrain and overlays, add this will fix both:

#mapCanvas label { width: auto; display:inline; }
#mapCanvas img { max-width: none; }

dvorberg commented May 6, 2012

Thanks for that fix!

This issue appears to have been reverted by 50b2245 - looks like an explicit max-width: none; declaration is required for v.2.0.3.

Confirm nrabinowitz's observation.

(previous work-arounds, of course, still work)

OndraM commented Aug 4, 2012

This issue is present in 2.0.4. as well.

Just include the map into a div with this id: id="map_canvas".

jgv commented Sep 11, 2012

@nodrog thanks – your fix worked perfectly

diogocsc commented Dec 8, 2012

for bootstrap 2.0.0 and latest gmaps4rails there seems not to be a map_canvas.
So i did

#map label { width: auto; display:inline; }
#map img { max-width: none; }

and it solved

I just want to say thanks. #something img {max-width:none;} WORKS!!! I wasted hours for this stupid error. =.=

Owner

cvrebert commented Feb 28, 2013

Duplicate of #1506.

Owner

cvrebert commented Feb 28, 2013

The label problem is #309.

Just Wanaa say THANKS. I was stuck for the same issue for a day

This fix works! Thanks!

Zugwalt commented Mar 25, 2013

Exactly what I needed!

Awesome, thanks for the tips!

Please add this in Bootstrap docs.

+1 - please add this!

Thanks! @splaice it really works!

Had this problem, thought it may have been because I had written custom functions but it seems that the max-width:none; solution works perfect. 👍

It looks like (at least the newer builds of) Google maps uses .gm-style on the element that's the immediate descendent of whatever element you assign to the map, this means you should be able to add the following:

.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }

to the Bootstrap styles and it'll just work fine.

Echo that this solved my problem as well. Thanks! @splaice

Ha! Just yesterday I implemented a custom map and animated the pins in to see them all squished. Got a watch notification just now about this issue, and holy crap, fixed it in 5 seconds.

jtconti commented Jun 7, 2013

This is great. Thank you for this. I ran into this problem as well using the Google Map API alongside bootstrap. Interestingly, the following declaration seemed to cause some other issues with a modal plugin that I was using.

div#gMap img{max-width:100%;}

I was using an @import url(modals.css) directly below the max-width declaration (above) and for whatever reason, the img max-width style was causing issues on my modals (even though I don't have any div#gMap img on my modals. By placing the div#gMap img declaration beneath my @import, it resolved the issue.

Can anyone offer any insight into why this style might have affected my modal layout without them containing any images that match that style declaration?

stevenbuccini referenced this issue in stevenbuccini/migration Jun 20, 2013

Closed

When using Bootstrap, the zoom slider is messed up. #8

I'm still seeing this, thankfully the suggestion in the first comment solved my issue. Cheers @splaice

Thank you guys, the fix works perfectly!

robertochingon referenced this issue in angular-ui/angular-google-maps Oct 9, 2013

Closed

Conflict with Bootstrap (Controls are broken) #129

@wwchen wwchen added a commit to wwchen/prime-restaurants that referenced this issue Dec 4, 2013

@wwchen wwchen Twitter bootstrap conflicts with Google Maps. Inline CSS fix 5fb9eee

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

@mdo mdo (less) remove max-width on img from reset and put in docs only, per #… e6a27d0

cvrebert locked and limited conversation to collaborators Jun 9, 2014

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

@mdo mdo (less) remove max-width on img from reset and put in docs only, per #… 91abcc5
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.