Open Street Map Width - Question | JoomShaper

Open Street Map Width

L

LEROY

SP Page Builder 1 week 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?

0
14 Answers
Pavel
Pavel
Accepted Answer
1 week 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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 week ago

Hi

Are you talking about this?

https://prnt.sc/1s5nxy2

-Regards

0
L
LEROY
Accepted Answer
1 week ago

yes !

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 week ago

Hi,

You can set the width from here

https://prnt.sc/1s6b5dj

Thank you

0
L
LEROY
Accepted Answer
1 week 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

0
Pavel
Pavel
Accepted Answer
1 week ago

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

.your-addon-class .leaflet-popup-content {
    width: 500px !important;
}
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 week 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

0
L
LEROY
Accepted Answer
1 week ago

Hello, I did what was necessary, emptied the cache but it doesn't work...![(http://prnt.sc/1s9vw7z]

0
Pavel
Pavel
Accepted Answer
1 week 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

0
L
LEROY
Accepted Answer
1 week ago

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

0
Pavel
Pavel
Accepted Answer
1 week ago

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;
}
0
L
LEROY
Accepted Answer
1 week ago

I understand that 'my-map' is the name of my class. but where can i find this name? i have no css skills I use an addon (openstreetmap) of sppagebuilder

0
L
LEROY
Accepted Answer
1 week ago

Many thanks Pavel for your help! It's perfect! It works as I wanted it to...

0
Pavel
Pavel
Accepted Answer
1 week ago

Hi. You are wellcome

0