Gmap displayed outside of block
| Project: | Acquia Marina |
| Version: | 6.x-1.9 |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Hi,
I want to display the "location map" provided by the Gmap module inside a block on my site. The map itself is working fine but the block display is broken when I use the Acquia Marina theme. Please see the attached screenshot for details.
The block only has a title and the bottom images with no real content. The map is overlayed by javascript after the block has been rendered. The theme would need to insert some padding (depending on the size of the map) into the empty block so that the map can be overlayed properly. When I use the Garland theme the map is displayed correctly, probably because there is no border around the block and the javascript map pushes all other page items down.
The map is currently set to 210 bx 210 pixel. If I set the map size to 100% height and 100% width the map is only the size of the empty block (roughly 30 pixels in height and 200 pixels in width).
Regards
Lars
| Attachment | Size |
|---|---|
| gmap_outside_block.jpg | 31.03 KB |
#1
I think that you will need to create an enclosing div with a height of 210 pixels or more within that block.
HTH
Terry
#2
It did help! Thanks a lot!
I now have added
div.block.block-gmap_location div.content {height:210px;
}
to my local.css and the block is displayed correctly.
However, I still see this as a workaround for the issue. The gmap macro defines the height of the content correctly inside the "content"-div (style= height:210px;) but it is somehow ignored.
Regards
Lars
#3
The google map is rendered by JavaScript after the HTML has been rendered, so the HTML needs to be told how much space to allocate.
If you look at an Google map tutorial, you will see that the position and size of the map are specified in the HTML or CSS.
Terry