Forums

CraigC

I am using a Google map on my homepage at http://craigcurry.com. It's contained in a div that is 410px wide, but the Google map copyright info is displaying at a width of 636px, spilling over into another column. The styling for that text (a "span") is coming from Google and it seems "white-space:no-wrap" is the culprit, but I cannot figure out how to target it in my CSS to override Google's. I've tried "overflow:hidden" on my google_map_box div but that's not working.

Anyone have any ideas?

#google_map_box {
	height: 250px;
	width: 410px;
	background: black;
	border: 1px solid white;
	margin: 10px auto;
	overflow:hidden;
	}

Thanks.

jamy_za

The problem is that the '#google_map_box div span' has inline styling of 'white-space:nowrap'. Targeting it with external stylesheets isn't going to work. After the google files have loaded, you could add the following jQuery:

<script type=\"text/javascript\">
$(document).ready(function(){ 
	
	$(\"div#google_map_box div span\").css(\"white-space\", \"none\");
	
}); 
</script>

CraigC

Thanks. I am having trouble getting that to work. I don't know my way around jquery very well. I'm not sure if I've put the code in the right place. It's directly below the google map javascript right before the closing body tag. I think it should be "white-space:normal" vs. "white-space:none", so I changed that out.

On Firefox, some inline styling seems to do the trick, but doesn't work for Safari or Chrome.

    <style type=\"text/css\">
       div span {
          white-space: normal;
       }
    </style>

jamy_za

You could set the display to none :)

CraigC

A clever solution; thanks! :D

treehouse : what would you like to learn today?

Forums

[Solved] Google Map Overflowing Text