TransWikia.com

White sides at marker popup

Geographic Information Systems Asked by organic88 on July 16, 2021

I like Leaflet a lot. But I want to ask how to remove white sides in the popup? I manage to turn of padding but it only removed top and bottom, but sides still stand. I will insert a image and it will be easier to understand.

Popu_sides

I mark sides with yellow color and I need to delete them and (x) close button should be on image. What am I doing wrong here?
The map is made using basic Leaflet JS tutorials.

My CSS:

#map {
  height: 680px;
}

.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
    background:rgb(255, 255, 255, 0.90);
    color: white;
    padding: 0 0 0 0; /*Deleted top and bottom white sides!*/

}


.card-text {
    font-size: 11px;
    color: black !important;

}
.card-title {
    color: rgb(9, 65, 139) !important;
}
.container{
    width:450px;
}
.imgar{
     padding: 5px 5px 5px 5px;
}
.imgar:hover{
     background:rgb(9, 65, 139, 0.8);
     padding: 5px 5px 5px 5px;
}

My customJavaScript:

/*Custom popup design*/
var customPopup_d = "<div class='card' style='width: 18rem;'><div id='carouselExampleControls' class='carousel slide' data-ride='carousel'><div class='carousel-inner'><div class='carousel-item active'><img class='d-block w-100' src='http://localhost:8080/Karte_simb/images/aizsaules_1a.jpg' alt='First slide'></div><div class='carousel-item'><img class='d-block w-100' src='http://localhost:8080/Karte_simb/images/aizsaules_1a_2.jpg' alt='Second slide'></div></div><a class='carousel-control-prev' href='#carouselExampleControls' role='button' data-slide='prev'><span class='carousel-control-prev-icon' aria-hidden='true'></span><span class='sr-only'>Previous</span></a><a class='carousel-control-next' href='#carouselExampleControls' role='button' data-slide='next'><span class='carousel-control-next-icon' aria-hidden='true'></span><span class='sr-only'>Next</span></a></div><div class='card-body'><h5 class='card-title text-center'> Kapsētas ieejas vārti </h5><p class='card-text'>Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.</p><div class='row'><div class='col'><img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> Aizsaules iela 1a</span></div><div class='col'><img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'> 1929. gads</span></div></div>";

/*Custom options*/
ar customOptions =
        {
        'maxWidth': '300',
        'className' : 'custom'
        }
/* bind the popup to marker.*/
marker.bindPopup(customPopup_3,customOptions);

One Answer

this will help you out!

.leaflet-popup-tip-container {
 background: transparent;
 display: none; 
}


.leaflet-popup-content-wrapper {
border-radius: 0;
border:3px solid rgba(0,0,0,0.4);
} 

Answered by manisha on July 16, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP