CSS newbie issues

Hello,
I am trying to use some freely available CSS code to customize my google maps InfoWindows.
How do i get rid of this scrollbar?
The code is like this

.gm-style-iw {
width: 300px !important;
top: 15px !important;
left: 0px !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 10px 10px;
}

#iw-container {
width: auto;
height: auto;
margin-bottom: 10px;
}

#iw-container .iw-title {
width: 310px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
font-weight: 400;
padding: 10px;
background-color: #48b5e9;
color: white;
margin: 0;
border-radius: 2px 2px 0 0;
}

#iw-container .iw-content {
width: 310px;
height: auto;
font-size: 13px;
line-height: 18px;
font-weight: 400;
margin-right: 1px;
padding: 15px 5px 20px 15px;
/*
max-height: 140px;
overflow-y: scroll;
*/
overflow-x: hidden;
}

.iw-content img {
float: right;
margin: 0 5px 5px 10px;
}

.iw-subTitle {
font-size: 16px;
font-weight: 700;
padding: 5px 0;
}

.iw-bottom-gradient {
position: absolute;
width: 310px;
height: 25px;
bottom: 10px;
right: 18px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}


#iw-wrap {
width:250px;
margin:0 auto;
}

#iw-left_col {
float:left;
width:125px;
}

#iw-right_col {
float:right;
width:125px;
}

vContent = '<div id="iw-container">';

if (vOnTimes == "Y") {
vContent = vContent + '<div class="iw-title">' + vDriverNames + '</div>';
} else {
vContent = vContent + '<div class="iw-title">' + vDriverNames + '</div>';
}

vContent = vContent +
'<div class="iw-content">' +
'<div class="iw-subTitle">' + vHubs + ' Hub' + '<br>Truck ' + vTruckNames + '</div>' +
'Last Update: ' + vTimestamps +
'<br><br><a href="' + vIDs +'">View Stops</a></b>' +
'<div class="iw-bottom-gradient"></div>' +
'</div> </div>';

vMarker.info = new google.maps.InfoWindow({
content: vContent,
maxWidth: 310
});



Thank you so much!

 

That code isn't gonna help us at all, since all it is is the CSS, not linked to the actual HTML it styles. Why not just link to the actual site? Or at least put up an example somewhere? But from the CSS, it seems that the scrollbar is defined here: #iw-container .iw-content - so either change the width, remove the scrollbar-definition or something along those lines.

 

Close button/icon tells us that the container itself is less wide than it was supposed to be. Making it wider should fix your issue and also put the button back in its place (centered @ top right corner).

 

Hello,

I'm trying to visualize your css and I see some points that maybe the issue:

Observe the following classes and their width.
.gm-style-iw {
width: 300px !important;

#iw-container .iw-title {
width: 310px;

#iw-container .iw-content {
width: 310px;

.iw-bottom-gradient {
width: 310px;

You will notice the .gm-style-iw and I believe this is the main container/box.
Therefore, those 310px (which I believe are inside .gm-style-iw) is pushing the content.
So that's why its automatically having vertical scrollbar.

Solution:
- Make sure all container inside is not greater than the main container width.
- Actually, If you don't need the 310px, you may remove them or make them 100% instead.
- Note: If you make them 100% and they have padding. Make sure to add box-sizing: border-box;

I hope this help.

Thanks and God bless always!
www.alfieindesigns.com