New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap distorts some Google Maps Controls and Overlays #1552

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

Comments

Projects
None yet
@dcope

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

This comment has been minimized.

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;
}

@mdo

This comment has been minimized.

Member

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

This comment has been minimized.

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...

@OlivierCuyp

This comment has been minimized.

OlivierCuyp commented Feb 7, 2012

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

This comment has been minimized.

dyve commented Feb 8, 2012

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

@yogoo

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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!

@OlivierCuyp

This comment has been minimized.

OlivierCuyp commented Feb 20, 2012

@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;
}
@mdo

This comment has been minimized.

Member

mdo commented Feb 21, 2012

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

@mdo mdo closed this Feb 21, 2012

@nodrog

This comment has been minimized.

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

This comment has been minimized.

dvorberg commented May 6, 2012

Thanks for that fix!

@nrabinowitz

This comment has been minimized.

nrabinowitz commented May 14, 2012

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

@jimmacgregor

This comment has been minimized.

jimmacgregor commented May 26, 2012

Confirm nrabinowitz's observation.

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

@OndraM

This comment has been minimized.

OndraM commented Aug 4, 2012

This issue is present in 2.0.4. as well.

@iliketomatoes

This comment has been minimized.

iliketomatoes commented Sep 4, 2012

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

@jgv

This comment has been minimized.

jgv commented Sep 11, 2012

@nodrog thanks – your fix worked perfectly

@diogocsc

This comment has been minimized.

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

@tandoigai

This comment has been minimized.

tandoigai commented Feb 28, 2013

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

@cvrebert

This comment has been minimized.

Member

cvrebert commented Feb 28, 2013

Duplicate of #1506.

@cvrebert

This comment has been minimized.

Member

cvrebert commented Feb 28, 2013

The label problem is #309.

@ayushcshah

This comment has been minimized.

ayushcshah commented Mar 11, 2013

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

@jacobcui

This comment has been minimized.

jacobcui commented Mar 22, 2013

This fix works! Thanks!

@Zugwalt

This comment has been minimized.

Zugwalt commented Mar 25, 2013

Exactly what I needed!

@redfern314

This comment has been minimized.

redfern314 commented Mar 28, 2013

Awesome, thanks for the tips!

@applegrew

This comment has been minimized.

applegrew commented Mar 30, 2013

Please add this in Bootstrap docs.

@patrickhafner

This comment has been minimized.

patrickhafner commented Apr 11, 2013

+1 - please add this!

@giancute23

This comment has been minimized.

giancute23 commented Apr 23, 2013

Thanks! @splaice it really works!

@thurrockdan

This comment has been minimized.

thurrockdan commented May 29, 2013

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. 👍

@pnomolos

This comment has been minimized.

pnomolos commented May 29, 2013

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.

@gregorypierce

This comment has been minimized.

gregorypierce commented Jun 4, 2013

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

@argyleink

This comment has been minimized.

argyleink commented Jun 4, 2013

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

This comment has been minimized.

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?

@bmcorser

This comment has been minimized.

bmcorser commented Jul 16, 2013

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

@marcotisi

This comment has been minimized.

marcotisi commented Jul 25, 2013

Thank you guys, the fix works perfectly!

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

@twbs twbs locked and limited conversation to collaborators Jun 9, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.