Adapt width of leaflet popup using Vue2Leaflet's l-popup component

Question

I am programming a web application and using leaflet to display a map. I defined markers and popups which appear upon click on the respective markers.

Unfortunately the popups look weird at the moment (the height is too large and the width too small). For this reason I am trying adapt the width of the popups.

I saw in the Vue2Leaflet documentation (https://vue2-leaflet.netlify.app/components/LPopup.html) that I can pass an options prop to the l-popup component. So I tried the following:

<l-popup :options="{ width: 600 }" id="popup"></l-popup>

But it did not work. How do I pass the width options correctly, so that the width of the popup changes? Or am I on a completely wrong path? If yes, how can I modify the width of the l-popup component?

Thanks for any help!

Answer 1

I just had the same issue. Finally, I didn't use the options in but used CSS instead.

Example:

<l-popup class="map-popup"></l-popup>

and then simply styled my element in CSS:

.map-popup {
    min-width: 600px;
}