인포윈도우 사용시 닫기버튼을 사용하기 위해서는 iwremovable이 true이어야 하고 옵션에 넣어주면 되는것을 알고있습니다.
웹페이지를 핸드폰화면에서도 띄워야 해서 테스트중인데, 아래 이미지처럼 화면이 핸드폰해상도일때 닫기 버튼의 크기가
이상해짐을 확인할 수 있었는데, 어떻게 해결해야할까요?
지도에 적용된 기본 스타일이 다른 css에 영향을 받아 보입니다.
개발자 도구에서 이미지 객체를 선택해서 충돌된 스타일이 있는지 확인 부탁드립니다.
충돌하는 부분은 없습니다. pc화면(1920x1080)해상도에서는 문제없이 잘나오는데, 구글 개발자모드를 통해 해상도를 줄이면
저런식으로 나옵니다. 코드상으로 iwremovable만 쓰면 버튼이 생기는데, html 구조상으로는 어디에 위치되어있는건가요?
그걸 알면 수정하기가 편할거 같은데
캡처상으로 보면 닫기 이미지의 width가 강제되어 보입니다.
인포윈도우 컨텐츠 생성 및 스타일 선언하는 부분 코드 첨부 부탁드립니다.
이미지 위치는 아래 예제에서 확인할 수 있습니다.
http://apis.map.kakao.com/web/sample/basicInfoWindow/
css파일과 현재html 부분을 같이해서 첨부했습니다.
<1. html>
<2. CSS>
/* css to dawul popup customize css /
/ 필요한 스타일 시트는 정의 해서 사용하세요… /
/ 적용은 팝업 옵션의 ‘className’:'tooltipTrans’로 적용 /
/ marker.bindPopup(html,{‘closeOnClick’:true,‘closeButton’:false,‘maxWidth’:‘500’,‘className’:‘tooltipTrans’}); */
.tooltipTrans .leaflet-popup-tip {width:0; height:0; margin:0; padding:0; color:black; transform:none;}
.tooltipTrans .leaflet-popup-content-wrapper {color:black;}
.tooltipTrans .leaflet-popup-content-wrapper {
border-radius:0;
box-shadow:0 0 0 rgba(0,0,0,0); /* 완전투명 /
background-color:transparent; / 백그라운드 투명 */
}
.tooltipTrans .leaflet-popup-content {margin:5px;}
.tooltipTrans {bottom:0; left:0;}
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
- {margin:0; padding:0; font-family:‘Nanum Gothic’, ‘dotum’,‘돋움’,‘gulim’; }
div,p,dl,dt,dd,span {margin:0; padding:0;}
ul,li {list-style:none;}
#express_wrap {position:relative; width:350px; }
#express_popup {float:left; width:350px; border:1px solid #214f71; }
#express_wrap .btn_close {position:absolute; top:10px; right:5px;}
#express_popup .map_id {background:#214f71; height:49px; line-height:49px; color:#fff; font-size:16px; font-family:‘Nanum Gothic’; font-weight:bold; padding-left:16px;}
/* 스크롤 사용시 아래 주석 */
#express_wrap #scroll_box {height:360px; overflow-y:scroll; overflow-x:hidden;}
#express_popup .express_dl {float:left; width:350px; }
#express_popup .express_dl dt {float:left; width:334px; height:30px; background:#e2e9ee; text-align:left; line-height:30px; border-top:1px solid #cbd8e2; font-size:13px; font-weight:bold; padding-left:16px;}
#express_popup .express_dl dd {float:left; width:100%; text-align:left; border-bottom:1px solid #fff; background:#fff;}
.express_ul {width:100%; float:left; border-top:1px solid #ddd; padding:5px 0;}
.express_ul li {float:left; display:inline-block; font-family:‘Nanum Gothic’; font-size:11px; color:#131313; line-height:20px;}
.express_ul .map_no {margin-left:20px; padding-top:4px; float:left;}
/* 버스 아이콘 이미지 컬러별 /
.express_ul .map_no .map_icon_b {width:100%; background:url(/images/sfms/map/icon_map_blue.png) no-repeat 0 100%; padding-left:25px; font-size:13px; font-weight:bold;} / 파란색 /
.express_ul .map_no .map_icon_g {width:100%; background:url(/images/sfms/map/icon_map_green.png) no-repeat 0 100%; padding-left:25px; font-size:13px; font-weight:bold;} / 초록색 /
.express_ul .map_no .map_icon_y {width:100%; background:url(/images/sfms/map/icon_map_yellow.png) no-repeat 0 100%; padding-left:25px; font-size:13px; font-weight:bold;} / 노란색 /
.express_ul .map_no .map_icon_r {width:100%; background:url(/images/sfms/map/icon_map_red.png) no-repeat 0 100%; padding-left:25px; font-size:13px; font-weight:bold;} / 빨간색 /
.express_ul .map_no .map_icon_p {width:100%; background:url(/images/sfms/map/icon_map_purple.png) no-repeat 0 100%; padding-left:25px; font-size:13px; font-weight:bold;} / 보라색 */
.express_ul li p {height:20px;}
.express_ul .map_text {margin-left:15px;}
/* 1,2 번 아이콘 이미지*/
.express_ul .map_text {width:100%; padding-left:5px; font-size:12px; padding-top:2px;}
.point_color {color:#096eb9; font-size:14px; font-weight:bold;}
/* 출발,도착 버튼 */
.btn_input {float:left; width:100%; text-align:center; padding:25px 0 15px 0; border-top:1px solid #ddd;}
input a:hover {background:#666; border:1px solid #bbb; color:#fff;}
/* 카카오 서브 컨테이너 */
html, body {width:100%;height:100%;margin:0;padding:0;}
.map_wrap {position:relative;overflow:hidden;width:100%;height:350px;}
.radius_border{border:1px solid #919191;border-radius:5px;}
.custom_typecontrol {background-color: #f5f5f5;position:absolute;top:10px;left:10px;overflow:hidden;width:390px;height:20px;margin:0;padding:0;z-index:100;font-size:12px;font-family:‘NanumGothic’, ‘맑은 고딕’, sans-serif;}
.custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
.custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff, #e6e6e6);}
.custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
.custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}
.custom_typecontrol .selected_btn {color:#fff;background:#425470;background:linear-gradient(#425470, #5b6d8a);}
.custom_typecontrol .selected_btn:hover {color:#fff;}
.custom_zoomcontrol {position:absolute;top:50px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;}
.custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}
.custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}
.custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}
첨부 코드와 스타일로는 닫기 이미지가 깨지지 않습니다.
다른 라이브러리 스타일을 로드한다면 해당 스타일 파일에서 영향을 줄 수도 있습니다.
개발자 도구에서 이미지 객체를 선택해 스타일 확인 부탁드립니다.