open street map width - Forum | JoomShaper
Solved SP Page Builder

open street map width

Asked by LEROY 5 years ago Last activity 5 years ago

Hello,

With the 'open street map' adon, a click on the marker opens a pop-up window. The height of this pop-up is linked to the content. How to set the width?

Accepted answer

Marked as the solution
Pavel
5 years ago

You do not need to find it. You just have to come up with it. Any words that are known to you are written by Latin, small letters without spaces and specials.

You can use the code without it, in this form

.leaflet-popup-content {
    width: 1000px !important;
}

But this code will have an impact on any other Open Street Map addons that you may want to use in another place of your site and where you will not need a width setting.
Adding your own class to Addon allows you to make the code isolated, so that this would have an impact on other addons.

13 more replies

Oldest first Newest first Most helpful
LEROY Asked this
5 years ago

yes !

LEROY Asked this
5 years ago

I think we are not talking about the same thing.
In Sp page builder pro, we find Addon: Open Street Map
see here: https://projet-iterrenet.fr/ligue/index.php/fr/les-clubs

by clicking on a blue dot, a pop up window opens.
I need to review the width of this window. Only the height adjusts to the content...

thanks

Pavel
5 years ago

Hi. Add class to the addon and try this code:

.your-addon-class .leaflet-popup-content {
    width: 500px !important;
}
Mehtaz Afsana Borsha Staff
5 years ago

Hi,

Yeah got it now. Then use this custom css

.your-addon-class .leaflet-popup-content {
    width: 700px !important;
}

Add this css code inside the custom.css file.
Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn
In Extensions>Template> Template Options > Custom Code > Custom CSS please add this
Thanks

Pavel
5 years ago

your-addon-class is just an example. You need to add your own class in the CSS Class field in the Open Street Map Addon settings. And use it in your code instead of your-addon-class

LEROY Asked this
5 years ago

Hello Pavel and thank you for your help but this is beyond my competence :(
Can you guide me?

Pavel
5 years ago · edited

Add your own class here and use it in provided above code

For example, if you add something like "my-map" code will be like this

.my-map .leaflet-popup-content {
    width: 1000px !important;
}
Log in to reply.