Bootstrap breaks Google Maps terrain selector

[davidrea]

When a "bare bones" Google Map is embedded on a Bootstrap-styled page inside a grid row & span, the terrain drop-down menu gets pushed off the side of the map:

http://imagebin.org/index.php?mode=image&id=174078

The satellite drop-down menu is similarly affected when 2 entries are present, but looks normal when only 1 entry is present:

http://imagebin.org/index.php?mode=image&id=174079

Removing the Bootstrap CSS link from the page (i.e. displaying the map un-styled) restores normal behavior.

This behavior observed in Chrome 14.0.835.186 and Firefox 3.6.22 on Ubuntu 10.04.

[hugovincent]

I can confirm this issue (Chrome 16.0.889.0 dev, Safari 5.1 on OS X 10.7.1).

[davidrea]

Also confirmed with Chrome 13.0.782.220 on Windows XP SP3

[mdo]

Have a jsfiddle or example code to share?

[davidrea]

Hadn't heard of jsfiddle, cool service! I just pasted in the map portion of my HTML, and the untouched Bootstrap 1.3.0 CSS. The label-off-the-side problem appears on the rendered output:

http://jsfiddle.net/3dvnk/

[necolas]

It's being caused by the global label styles...in particular width:130px.

[davidrea]

Any way to reset the label styles group for the id="map_canvas" div?

[ghost]

+1 ditto

[mppfiles]

Easy, just add this to your project stylesheet:

the only difference I see on JSFiddle is that the horizontal scrollbar is still present.

[mdo]

Yeah, for now you'll have to manually override this as @mppfiles suggests until 2.0 launches and we ditch a lot of old classes and can start with a bit of a fresh slate to scope the label (and a lot of other) elements properly.