CODEWITHSUNDEEP
cssgoogle-mapstwitter-bootstrap
lowcoupling
lowcoupling

Reputation: 2169

Google map in bootstrap css

I am trying to load a map in the second section of this page

http://lowcoupling.appspot.com/anotherMapPage.html

As you can see the problem is that the map is depicted as a 1px line

What am I doing wrong?

Upvotes: 0

Views: 520

Answers (1)

easwee
easwee

Reputation: 15905

What am I doing wrong?

You are using height:100% to make the map as high as your section is - where you calculate min-height: calc(100% - 1px);. But you have bootstrap row element between, which does not have a set height, so your map does not have a direct parent element to calculate it's width from - so it takes 1px - which is already set by default by bootstrap (min-height:1px - to keep columns in place).

You need to have a direct parent element which has a set height (that is not defined in percentages) to have the map expand to 100% of it's height.

If the row element that wraps your map would have a fixed height, your map container would expand to 100% of that height.

See example with direct parent using calc(100% - 1px): http://jsfiddle.net/LDzSk/1/

Upvotes: 5

Related Questions