1
我有上彈出信息窗口時出現有大量的內容中水平滾動條的問題。當有少量的內容不在高度以下時很好。然而，它似乎計算的大小知道內容低於高度之前，所以並沒有因素的滾動條寬度英寸谷歌地圖信息窗口具有水平滾動條
我已經設置了包含div的寬度我傳遞給它480px，但它插入一個只有460px的div，因此滾動條。我也試過寬度自動。 我還沒有設法從我讀過的其他類似問題的答案中找到答案。
我創建了一個的jsfiddle顯示什麼我談論： http://jsfiddle.net/TH7yt/1/
具有垂直滾動條是可以接受的，但我不想水平之一。
希望有人可以幫我找出如何擺脫它。
謝謝。
對於那些誰希望看到這裏的代碼：
HTML
<div id="map-canvas"></div>
CSS
#map-canvas {
width: 1017px;
height: 500px;
margin-top: 50px;
}
.branch-location {
width: 480px;
padding-top:10px;
margin-bottom: 20px;
}
.branch-location .block-title
{
font-family: Arial;
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
margin-left: 20px;
}
.branch-location .contact-info
{
width: 270px;
font-size: 12px;
font-family: Arial;
}
[class*="span"]
{
float: left;
margin-left: 20px;
}
.branch-location .contact-info address
{
font-size: 1em;
margin-bottom: 10px;
font-style: normal;
line-height: 1.667em;
}
.branch-location .contact-info address .country
{
display: block;
}
.branch-location .entry-link
{
display: block;
margin-bottom: 10px;
color: #007571;
text-decoration: none;
}
.branch-location .branch-note, .branch-location .branch-hours
{
line-height: 1.667em;
}
.branch-location .branch-hours-heading
{
display: block;
font-weight: bold;
margin-top: 8px;
margin-bottom: 10px;
}
.branch-location .contact-entries-block
{
float: left;
line-height: 1.667em;
margin-left: 30px;
width: 160px;
font-family: Arial;
font-size: 12px;
word-wrap: break-word;
}
.branch-location .contact-entries-block a
{
display: block;
color: #007571;
text-decoration: underline;
}
.numbers .tel-numbers
{
display: block;
margin-left: 13px;
}
的Javascript
var lat = -37.7833;
var lng = 144.9667;
var coord = new google.maps.LatLng(lat, lng);
var infoHTML = '<div class="row branch-location" itemscope itemtype="http://schema.org/Organization">' +
'<h3 class="block-title" itemprop="name"></span>Test Branch</h3>' +
'<div class="span3 contact-info">' +
'<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">' +
'<span itemprop="streetAddress">' +
'Address Line1<br />' +
'Address Line2<br />' +
'</span>' +
'<span itemprop="addressLocality">Suburb  </span> <span itemprop="addressRegion">State  </span><span itemprop="postalCode">Postcode</span><br />' +
'<span itemprop="addressCountry" class="country">Australia</span></address>' +
'<a href="http://maps.google.com?daddr=-37.7833,144.9667"' +
'class="entry-link email-link" target="_blank">' +
'<span class="icon icon-right-small"></span>' +
'Get Directions' +
'</a>' +
'<span class="branch-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque enim lorem, semper at facilisis sit amet, convallis non massa. Etiam in mattis justo. Cras dictum rutrum elit, sed consequat eros facilisis adipiscing. Suspendisse id tincidunt dolor. Donec laoreet malesuada dolor, quis aliquam dolor eleifend pharetra. Integer id ipsum non nibh dapibus consequat ut vitae erat. Maecenas quis nisl odio, quis scelerisque mauris. Nullam sit amet nibh tellus, eu tempus urna. Quisque ut lectus sapien, a commodo urna.</span><span class="branch-hours-heading">Hours of Operation:</span>' +
'<span class="branch-hours">8.30 AM to 5.30 PM</span>' +
'</div>' +
'<div class="contact-entries-block">' +
'<div class="numbers">' +
'<p itemprop="telephone">T 123456789<span class="tel-numbers">987654321</span></p>' +
'<p itemprop="faxNumber">F 123456789</p>' +
'</div>' +
'<a href="mailto:[email protected]" title="" itemprop="email">[email protected]</a>' +
'<a href="mailto:[email protected]" title="" itemprop="email">[email protected]</a>' +
'</div>' +
'</div>';
var mapOptions = {
center: coord,
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: coord,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: infoHTML,
position: coord
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
// Close infoWindow when user clicks anywhere on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.open(null, null);
});