【问题标题】:not able to remove the white border from the infowindow无法从信息窗口中删除白色边框
【发布时间】: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


【解决方案1】:

你为什么不使用border-width: 0px !important;?

如果没有视觉示例,很难理解您要做什么。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-21
    • 2023-02-14
    • 2021-11-05
    • 1970-01-01
    相关资源
    最近更新 更多