问题描述:

I am working on Google Map and showing an InfoWindow using the InfoBubble library. My problem is that when I show image for outside div with CSS properties it's showing half image that is within div.

Here is my CSS code:

#wider-header{

overflow: hidden;

display:inline-block;

width: 100px;

height: 300px;

}

#wide-header img {

position:relative;

top:-70px;

float:right;

border-radius: 50% 50% 50% 50%;

border: 2px solid #d81f27;

}

and the JavaScript:

infoBubble2 = new InfoBubble({

map: map,

content: "<div id='wide-header'><img id='jdImg' src='http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg' width='100' height='100' alt='userImage'></div>",

position: new google.maps.LatLng(-35, 151),

padding: 10,

backgroundColor: '#fff',

borderRadius: 4,

arrowSize: 10,

borderWidth: 1,

borderColor: '#2c2c2c',

disableAutoPan: false,

hideCloseButton: true,

arrowPosition: 50,

arrowStyle: 3

});

infoBubble2.open();

The code above results in this:

How can I fix this?

网友答案:

i found my solution by changed these lines in infobubble.js library

     // Content area
             var contentContainer = this.contentContainer_ = document.createElement('DIV');
             contentContainer.style['overflowX'] = 'auto';
             contentContainer.style['overflowY'] = 'auto';
into
             // Content area
             var contentContainer = this.contentContainer_ = document.createElement('DIV');
             contentContainer.style['overflowX'] = 'visible';
             contentContainer.style['overflowY'] = 'visible';

Here is the required solution

相关阅读:
Top