1

内部に多くのコンテンツがある場合、infoWindow ポップアップに水平スクロール バーが表示されるという問題があります。高さを下回らない少量の内容物であれば問題ありません。ただし、コンテンツが高さを下回ることを知る前にサイズを計算しているように見えるため、スクロールバーの幅は考慮されていません。

含む div の幅を 480px に設定しましたが、460px のみの div に挿入されているため、スクロール バーが表示されます。width autoも試しました。私が読んだ他の同様の質問への回答から解決策を見つけることができませんでした。

私が話していることを示すために 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);
});
4

1 に答える 1

1

私のubuntuクロムでは、情報ウィンドウ内のテキストの最後までスクロールするまで、水平スクロールバーがありません。この時点で、水平スクロールバーが表示されます。

追加するだけ

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

それを取り除くためにあなたのCSSの中に

于 2013-10-10T10:13:32.857 に答える