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.


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.


#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;
     padding: 5px 5px 5px 5px;
     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.*/
  • Can you give more information on your project? How did you create the webmap and could you attach the codesnippet refering to the popup? – gHupf Mar 14 at 8:41
  • I updated my question. BUt if you have basic knowledge about leaflet you should know how the map marker popup are made. The .custom .leaflet-popup-tip, .custom .leaflet-popup-content-wrapper are resposible for designing the popup. – organic88 Mar 14 at 11:36
  • It's not about how a popup is made, it's how about you made it and designed it. I can't reproduce it right now, but it's probably about the ´width´. And you can always use the inspector of your browser to inspect the different elements of the popup and see where the fault could be. – gHupf Mar 14 at 12:30
  • Ok I understand and sorry. I update the popup style. I use bootstrap 4 also. – organic88 Mar 14 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.