Bootstrap breaks img tag in Google Maps #1506

Closed
ungsophy opened this Issue Feb 1, 2012 · 15 comments

Comments

Projects
None yet
@ungsophy

ungsophy commented Feb 1, 2012

First of all thanks for your fantastic work. It does SAVE me a lot of time.

When I put Google Maps into Bootstrap layout, img tag in Google Maps breaks because Bootstrap set img max-width to 100%. When I comment max-width, it's working find but I'm not sure whether it'll break something else in Bootstrap or not.

Bootstrap and Google Maps
http://jsfiddle.net/jhnRD/1/

Google Maps without Bootstrap
http://jsfiddle.net/aVx8L/

Cheers,

@kevva

This comment has been minimized.

Show comment Hide comment
@kevva

kevva Feb 1, 2012

Contributor

max-width: 100% is only there for responsive purposes. So no, you won't break anything in Bootstrap. Your images won't scale though.

Contributor

kevva commented Feb 1, 2012

max-width: 100% is only there for responsive purposes. So no, you won't break anything in Bootstrap. Your images won't scale though.

@ungsophy

This comment has been minimized.

Show comment Hide comment
@ungsophy

ungsophy Feb 1, 2012

ok thanks @kevva

ungsophy commented Feb 1, 2012

ok thanks @kevva

@ungsophy ungsophy closed this Feb 1, 2012

@richardroyal

This comment has been minimized.

Show comment Hide comment
@richardroyal

richardroyal Feb 3, 2012

Had the same problem.

Used:

#map_canvas img{max-width:none}

as a more targeted fix.

Had the same problem.

Used:

#map_canvas img{max-width:none}

as a more targeted fix.

@kcivey

This comment has been minimized.

Show comment Hide comment
@kcivey

kcivey Feb 4, 2012

Ran into the same problem with OpenLayers popups on a map. The tails on the balloons were messed up by the "max-width: 100%".

kcivey commented Feb 4, 2012

Ran into the same problem with OpenLayers popups on a map. The tails on the balloons were messed up by the "max-width: 100%".

@bpeng

This comment has been minimized.

Show comment Hide comment
@bpeng

bpeng Feb 20, 2012

Have the same problem with leaflet, the map doesn't show up at all with the "max-width: 100%".

bpeng commented Feb 20, 2012

Have the same problem with leaflet, the map doesn't show up at all with the "max-width: 100%".

@gavi

This comment has been minimized.

Show comment Hide comment
@gavi

gavi Feb 20, 2012

I have the same issue. Thanks for the comments.

gavi commented Feb 20, 2012

I have the same issue. Thanks for the comments.

@zivester

This comment has been minimized.

Show comment Hide comment
@zivester

zivester Feb 21, 2012

The img{ height:auto } is also causing a problem with the Google +1 button. Seems to be a very similar issue to the one above. Removing the property fixes the issue. This may be a +1 bug instead?

The img{ height:auto } is also causing a problem with the Google +1 button. Seems to be a very similar issue to the one above. Removing the property fixes the issue. This may be a +1 bug instead?

@base2arthur

This comment has been minimized.

Show comment Hide comment
@base2arthur

base2arthur Mar 3, 2012

Just figured this one out. Could not work out what was breaking the gmap controls until I removed the img from css.
Wonder if this should be fixed in Bootstrap or if google needs to alter the controls?

Just figured this one out. Could not work out what was breaking the gmap controls until I removed the img from css.
Wonder if this should be fixed in Bootstrap or if google needs to alter the controls?

@Leonidas-from-XIV

This comment has been minimized.

Show comment Hide comment
@Leonidas-from-XIV

Leonidas-from-XIV May 2, 2012

Shouldn't this be somehow properly addressed? Because it breaks Leflet and Google Maps, which is quite bad. Or it should be at least documented, especially as embedding Google Maps is quite common now.

Shouldn't this be somehow properly addressed? Because it breaks Leflet and Google Maps, which is quite bad. Or it should be at least documented, especially as embedding Google Maps is quite common now.

@ungsophy

This comment has been minimized.

Show comment Hide comment
@ungsophy

ungsophy May 2, 2012

+1 add it to documentation.

ungsophy commented May 2, 2012

+1 add it to documentation.

@richarvey

This comment has been minimized.

Show comment Hide comment
@richarvey

richarvey Jun 6, 2012

Cheers for the fix guys this was driving me mad!

Cheers for the fix guys this was driving me mad!

@cvrebert

This comment has been minimized.

Show comment Hide comment
@cvrebert

cvrebert Feb 28, 2013

Owner

Related: #309 (problem regarding width of <label>s in Google Maps)

Owner

cvrebert commented Feb 28, 2013

Related: #309 (problem regarding width of <label>s in Google Maps)

@cvrebert

This comment has been minimized.

Show comment Hide comment
@cvrebert

cvrebert Feb 28, 2013

Owner

Current fix (as of 2.3.0) is to adjust your HTML to exploit the styling applied to #map_canvas and .google-maps by https://github.com/twitter/bootstrap/blob/16111a5e454a8af4407f4217b5defb6d7a9bdbd3/less/reset.less#L90

Owner

cvrebert commented Feb 28, 2013

Current fix (as of 2.3.0) is to adjust your HTML to exploit the styling applied to #map_canvas and .google-maps by https://github.com/twitter/bootstrap/blob/16111a5e454a8af4407f4217b5defb6d7a9bdbd3/less/reset.less#L90

@cvrebert

This comment has been minimized.

Show comment Hide comment
@cvrebert

cvrebert Jul 2, 2013

Owner

Fixed in 3.0.0-wip by 09cdee2.

Owner

cvrebert commented Jul 2, 2013

Fixed in 3.0.0-wip by 09cdee2.

cvrebert referenced this issue Jul 2, 2013

Overall responsive `img` styles
`img`s are no longer responsive by default. Instead, use
`.img-responsive` as a class or mixin. Existing `.thumbnail > img` and
`.img-thumbnail` classes now make use of this as a mixin as well.
@Jorgelig

This comment has been minimized.

Show comment Hide comment
@Jorgelig

Jorgelig Jul 26, 2013

Google Maps-specific solution:

    img[src^="http://maps.gstatic.com/"], /* map view */
    img[src^="http://maps.googleapis.com/"] /* street view */
    {
        max-width: none;
    }

Google Maps-specific solution:

    img[src^="http://maps.gstatic.com/"], /* map view */
    img[src^="http://maps.googleapis.com/"] /* street view */
    {
        max-width: none;
    }

@cvrebert cvrebert locked and limited conversation to collaborators Jul 28, 2014

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