Remove right and bottom margin on infowindows

Question

I'm playing around with the google InfoWindow.

And almost everything is perfect. I'm Just missing something on the windows.

I always have a right and bottom white space.

I don't mind that much for the bottom one but I'd like to get rid of the right one.

Any idea how to do that ?

EDIT, here is the code:

<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
  <div class="" style="overflow: auto;">
    <div class="infoBox">
      <div style="max-width: 352px; padding: 0px;">
        <div id="info-map-element"> 
          <div class="street"> 
            <img src="http://maps.googleapis.com/maps/api/streetview?size=360x190&amp;location=37.7831059,-122.4446528&amp;fov=90&amp;heading=235&amp;pitch=10&amp;sensor=false" alt=""> 
            <div class="shadow"></div>
            <div class="title"> Customer History<br> 123 Foo Av, San Francisco, CA 12345</div>       
          </div>
          <div class="wrap clearfix"> 
            <div class="item  clearfix">
              <small>2013-09-11</small>
              <p>This is the a test of customer history purchases.</p>
                <div class="row clearfix">
                  <div class="col-lg-5"> Cost Estimate <span>$11000</span></div>
                <div class="col-lg-7"> Purchase No. <span>123456789</span></div>
            </div> 
            <div class="row clearfix">
              <div class="col-lg-12"> Sell by <a href="">My Online seller dot com</a></div>
            </div>
          </div>
          <div class="row clearfix"></div>
        </div>
      </div>
    </div>
  </div>
</div>


#map_newsfeed .gm-style-iw {
    width: 352px!important;
    height: auto!important;
    left: 0!important;
    font-size: 15px!important;
    font-weight: normal!important;
    top: 0!important;
    overflow: hidden!important;
    border-radius: 3px;
}
#map_newsfeed .gm-style-iw > div {
    overflow: hidden!important;
}.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
    font-size: 13px;
    font-weight: normal;
}#info-map-element .row > div {
    font-size: inherit;
    font-weight: inherit;
}
#info-map-element .shadow {
    width: 100%;
    height: 100%;
    bottom: 0;
    -webkit-box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
    box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
    position: absolute;
    font-style: normal;
    font-weight: normal;
    z-index: 1;
}
#map .gm-style {
    font-family: inherit;
}#info-map-element .pagination {
    margin: 10px 0 0;
}
.infoBox > img {
    position: absolute;
    top: 0px;
    right: 25px;
    display: block;
    z-index: 3;
}
#info-map-element .pointer {
    width:23px;
    height:19px;
    top: 99%;
    left: 41%;
    position:absolute;
    display:block;
    background: transparent url('http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png'); 
}#info-map-element .wrap {
    padding: 0;
}
#info-map-element .wrap .item:nth-child(even) {
    background: #ececec;
}
#info-map-element .wrap .item {
    padding: 10px;
}#legend strong {
    float: left;
    margin: 0 10px 0 0;
    display: block;
}

EDTI #2: So I can change the dom the way I want it with Jquery. Those 3 lines work"

$(".gm-style-iw").next("div").css("right", '52px');
$(".gm-style-iw").prev("div").children().last().css("width", '351px');
$($(".gm-style-iw").prev("div").children()[1]).css("width", '351px');

But for some reason only the first line get executed.

Answer 1

The padding is caused by the scroll applied to the .gm-style-iw-d div, this would remove it but be careful and make sure all your content fits inside the max width and height of the info window cause otherwise it will be hidden.

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