0

I have a problem similar to this post. Basically, the CSS is not applying to the element I am trying to target, and I cannot see why not:

/* css file: */
.sitePopUp .leaflet-popup-content-wrapper{

    background: white !important;
    color: #0a10b9;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4) !important;
    background-color: #61ead6 !important;
    border-radius: 0.3em;

}

.sitePopUp{   
    background: white !important;
    color: #0a10b9;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4) !important;
    background-color: #61ead6 !important;
    border-radius: 0.3em;

}

// Having both above styles affects the element begind the leaflet-popup-content-wrapper
// If one of these two styles are omitted, the style is not applied to anything

/* JS file */
var popup = L.popup()
                    .setContent(`Some content... `)
let customPopUpOptions  = {className: 'sitePopUp', 'max-width': '500'}
let customMarkerOptions = {'icon': cutsomIcon}
let marker              = L.marker( [latitude, longitude],  customMarkerOptions )
                                        .bindPopup(popup, customPopUpOptions)

The page source file (HTML) shows the sitePopUp class is added, but the element behind the popup is styled instead of the popup

<div class="leaflet-popup sitePopUp leaflet-zoom-animated" style="opacity: 1; transform: translate3d(979px, 241px, 0px); bottom: -7px; left: -159px;">
    <div class="leaflet-popup-content-wrapper"><div class="leaflet-popup-content" style="width: 278px;">
        <h3>Some content

        </h3>
    </div>
                                                
    </div>
    <div class="leaflet-popup-tip-container">
        <div class="leaflet-popup-tip"></div>
    </div>
    <a class="leaflet-popup-close-button" href="#close">×</a>
</div>

Inspecting element shows:

element.style {
    opacity: 1;
    transform: translate3d(979px, 241px, 0px);
    bottom: -7px;
    left: -159px;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    opacity: 1;
}
.leaflet-fade-anim .leaflet-popup {
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
.sitePopUp {
    background: white;
    color: #0a10b9;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    background-color: #61ead6;
    border-radius: 0.3em;
}

I expected that the first style where the decedent element is styled do the trick, so what is going on?

EDIT: So, this is getting a bit confusing. The picture below shows what I mean by applying the style to the element below. HOWEVER, I tried to reproduce a static page on codesandbox.io and in there the style is applied correctly to the popup. see the link here

enter image description here

  • 1
    Works for me, styles are being applied to the popup. I do not understand what you mean by "element behind the popup" nor by "dececent element". – IvanSanchez Jul 11 at 0:38
  • @IvanSanchez I know it should work. In fact, it does on codesandbox I made and included a link to. But, on my site, it is applied as it is shown on the image (see the four corners with a different color than white). The sandbox code is obviously a quick one, but the site does show that the page reads the style file. They both use className, but the styles panel of developer tool for CodeSandBox shows sitePopUp as the top rule whereas the same panel in the site shows the style being inherited from leaflet-popup sitePopUp leaflet-zoom-animated which I never changed – EarlyCoder Jul 11 at 16:17
  • 1
    Then debug your styles, pal. You might be adding two popups, one on top of the other, or something like that. – IvanSanchez Jul 11 at 20:29
  • fair enough! I first thought I am missing something, but when I reproduced it on codesandbox to provide you with a live problem, I found out it may be due to some other problem somewhere else in my code. I'll post an answer if the fix is of value to anyone else – EarlyCoder Jul 11 at 21:07
  • @EarlyCoder Yes please post an answer, otherwise this will be closed as "can no longer be reproduced" – Midavalo Jul 12 at 15:25

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.