Question

当内部有很多内容时，我在infoWindow弹出窗口中出现水平滚动条的问题。当少量内容不低于高度时，它很好。然而，它似乎在知道内容低于高度之前计算大小，因此不会将滚动条宽度计算在内。

我已经设置了包含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 &nbsp</span> <span itemprop="addressRegion">State &nbsp</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:test@someemail.com" title="" itemprop="email">test@someemail.com</a>' +
    '<a href="mailto:thisisalongemailtotestwrapping@someemail.com" title="" itemprop="email">thisisalongemailtotestwrapping@email.com</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);
});

Answer 1

在我的ubuntu chrome上，我没有水平滚动条，直到你向下滚动infowindow内的文本结尾。此时，将出现水平滚动条。

添加

.gm-style-iw div { overflow:hidden !important; }

在你的CSS里面摆脱它

Google地图InfoWindow具有水平滚动条

1 个答案: