html, body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#row_1 {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#left_1, #right_1 {
padding: 0;
margin: 0;
height: 100%;
display: block;
overflow-y: auto;
overflow-x: auto;
}
#map {
padding: 0;
margin: 0;
height: 100%;
/*
bug fix: leaflet map will display scrollbar with below setting. so need comment out
other google map bing, here, etc do NOT need this either.
Only left_1 div need this for scrollbar when large amount of content.
display: block;
overflow-y: auto;
overflow-x: auto;
*/
}
/* some new esri sample use viewDiv instead of map */
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
/*
Map div is parent div, must place position: xxx; in order for on-map-control use position: absolute; to relative to parent div
https://stackoverflow.com/questions/65642167/cannot-apply-style-to-dynamically-created-elements-in-javascript/65642573?noredirect=1#comment125074687_65642573
position: fixed; absolute; not working
*/
position: relative;
/*
bug fix: leaflet map will display scrollbar with below setting. so need comment out
other google map bing, here, etc do NOT need this either.
Only left_1 div need this for scrollbar when large amount of content.
display: block;
overflow-y: auto;
overflow-x: auto;
*/
}
/* -------- view UI -------- control -------- */
#search-widget-div {
position: absolute; /* relative; fixed; */
top: 15px;
left: 60px;
height:60px;
width: 600px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
/* border-color: rgba(255,255,255, .80);
border-width: thick; */
background-color: rgba(0,0,0, .60);
/* color: black; rgba(255,255,255, .90); */
}
#coordsWidget {
position: absolute; /* fixed; */
bottom: 20px;
left: 10px;
height:26px;
width: 680px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: rgba(0,0,0, .40);
}
.zoom2layer_btn_class {
position: absolute; /* fixed; */
opacity: 0.6;
bottom: 60px;
left: 10px;
height:50px;
width: 130px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
/* -------- end -------- view UI -------- control -------- */