1

I have a lightning-map component that I need to fit within the div element. But it looks like the default width specified in the slds-map css is 23.75rem which is causing the map to flow outside. Can anyone help me with a way to adjust the inner styles using css/javascript?

enter image description here

I was able to adjust the width by inspecting the element and manipulating the slds-map class: enter image description here

But, I need a way to implement this in the actual code:

<div class="mapBoundary">
   <lightning-map 
       map-markers={item.mapMarkers}
       zoom-level={zoomLevel}>        
   </lightning-map>
</div>

I tried the following CSS to try overriding the default css, but it didn't work:

lightning-map > div > div .slds-map{
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 10rem;
}
0

Found a solution for this via Javascript:

renderedCallback() {
    const style = document.createElement('style');
    style.innerText = `c-wc-locations .slds-map {
    min-width: 0 !important;
    }`;
    this.template.querySelector('lightning-map').appendChild(style);
}
| improve this answer | |

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.