【发布时间】:2016-10-10 03:49:08
【问题描述】:
您好,我正在使用以下 CSS 从信息窗口中删除多余的白色边框,它可以与 CSS 中提供的高度和宽度一起正常工作 但是我正在使用 2 个 Infowindows 并且两个 Infowidows 的高度和宽度都不同,所以当我根据 1 个信息窗口调整高度和宽度时,另一个信息窗口会出现一个额外的白色边框
有什么方法可以从两个信息窗口中删除白色边框。我尝试将高度和宽度设置为自动但没有成功
// --------------java script-----------------
var iwOuter1 = $('.gm-style-iw');
/*
* Since this div is in a position prior to .gm-div
* style-iw. We use jQuery and create a iwBackground
* variable, and took advantage of the existing reference
* .gm-style-iw for the previous div with .prev().
*/
var iwBackground1 = iwOuter1.prev();
// Removes background shadow DIV
iwBackground1.children(':nth-child(2)').css({
'display': 'none'
});
// Removes white background DIV
iwBackground1.children(':nth-child(4)').css({
'display': 'none'
});
// Changes the desired tail shadow color.
iwBackground1.children(':nth-child(3)').find('div').children().css({
'box-shadow': 'rgba(0, 0, 0, 0.9) 0px 1px 6px',
'z-index': '1'
});
// Reference to the div that groups the close button
// elements.
var iwCloseBtn1 = iwOuter1.next();
// Apply the desired effect to the close button
iwCloseBtn1.css({
opacity: '1',
right: '74px',
top: '25px'
});
// If the content of infowindow not exceed the set maximum
// height, then the gradient is removed.
if ($('.iw-content').height() < 140) {
$('.iw-bottom-gradient').css({
display: 'none'
});
}
// The API automatically applies 0.7 opacity to the button
// after the mouseout event. This function reverses this
// event to the desired value.
iwCloseBtn1.mouseout(function() {
$(this).css({
opacity: '1'
});
});
});
}
-------------------css-----------------
.gm-style-iw {
max-width:480px;
min-width:200px;
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);
}
#iw-container {
margin-bottom: 10px;
}
#iw-container .iw-title {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
font-weight: 400;
padding: 10px;
color: #3399ff;
text-align: left;
margin: 0;
background-color:#f6d9bb;
border-radius: 2px 2px 0 0;
border-bottom: 3px solid black;
height: 100%;
}
#iw-container .iw-title1 {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 15px;
font-weight: 400;
padding: 10px;
color: black;
text-align: center;
margin: 10px;
border-radius: 2px 2px 0 0;
}
#iw-container .iw-content {
font-size: 13px;
line-height: 18px;
font-weight: 400;
margin-right: 1px;
padding: 15px 5px 20px 15px;
max-height: 140px;
overflow-y: auto;
overflow-x: hidden;
}
.iw-content img {
float: right;
margin: 0 5px 5px 10px;
}
【问题讨论】:
-
你能提供jsfiddle或html部分吗?有点难以理解发生了什么:)
标签: html css infowindow