1

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:

enter image description here

How can I fix this?

Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
Jd Akram
  • 47
  • 5
  • Why do you have `top:-70px;` in the CSS for the image? That looks like what's moving the `img` outside of its containig `div` – Alvaro Montoro Oct 23 '15 at 19:05
  • @AlvaroMontoro- for moving img outside of div in top direction – Jd Akram Oct 23 '15 at 19:12
  • So you want it to be in top, but visible outside the div? – Alvaro Montoro Oct 23 '15 at 19:14
  • yes, my requirement is to show half image within and half outside of div. – Jd Akram Oct 23 '15 at 19:15
  • Does removing the `overflow: hidden;` from #wider-header show the image? If not, it may be the bubble style the one that has an `overflow:hidden` and it will be trickier – Alvaro Montoro Oct 23 '15 at 19:18
  • i tried to remove overflow: hidden; from #wider-header but problem remained same. one more thing if change parent div attribute from overflow:auto to overflow:visible by manually inspect element it showing the same result which is require. – Jd Akram Oct 23 '15 at 19:26

1 Answers1

1

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

Jd Akram
  • 47
  • 5
  • Glad you found the solution. Maybe you could extend/suggest an extension to the infobubble.js library so it is more general and it has an option that enables/disables overflow – Alvaro Montoro Oct 23 '15 at 20:54