Close Popup
Posted: 07 Jun 2024, 10:48
How to place the popup closing cross to the right of the place name to make the popup narrower and longer?
https://imgur.com/a/JoyoFkA
https://imgur.com/a/JoyoFkA
Jan
Page 1 of 1
Re: Close Popup
Posted: 09 Jun 2024, 16:16
Hi, this is not a Phoca Maps feature, this is Google Maps or OSM feature. Try to check if some of your CSS loaded on your site does not somehow conflict it, because usually, the button is aligned to right.
Jan
Jan
Re: Close Popup
Posted: 10 Jun 2024, 12:04
Hi,
As there is no live URL given, I just took a Demo:
https://www.phoca.cz/demo/phoca-maps-plugin-demo
There is:
whatever you want to change (to your custom.css from your template).
Kind regards
Christine
As there is no live URL given, I just took a Demo:
https://www.phoca.cz/demo/phoca-maps-plugin-demo
There is:
Code: Select all
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
font-weight: normal;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}You could try, to play around - for example:
Code: Select all
.leaflet-container a.leaflet-popup-close-button {
top: 10px;
}Kind regards
Christine
Re: Close Popup
Posted: 10 Jun 2024, 13:49
It's about Google Maps.
The map is available at https://zachodslonca.pl/mapa
Open Street Maps are working properly.
The map is available at https://zachodslonca.pl/mapa
Open Street Maps are working properly.
Re: Close Popup
Posted: 11 Jun 2024, 14:27
Hi,
Well, we can't really influence that, because everything is displayed by the G server.
Nevertheless, I tried a few things. The code is an example.
But an !important; had to be added everywhere, because it is inline code (and it compiles too).
I inserted above temporarily on your page, it would look like this:
You then have to play around with padding and/or margin etc. yourself.
It also depends on the length of the place name.
But you would have to put CSS code in a custom.css of your template.
Kind regards
Christine
Well, we can't really influence that, because everything is displayed by the G server.
Nevertheless, I tried a few things. The code is an example.
But an !important; had to be added everywhere, because it is inline code (and it compiles too).
Code: Select all
button.gm-ui-hover-effect {
height: 20px !important;
padding-right: 30px !important;
padding-top: 2px !important;
padding-left: 90px !important;
}You then have to play around with padding and/or margin etc. yourself.
It also depends on the length of the place name.
But you would have to put CSS code in a custom.css of your template.
Kind regards
Christine
Re: Close Popup
Posted: 12 Jun 2024, 11:34
I placed the code on the website and it actually looks better visually.
Unfortunately the functionality is bad. I click on the cross sign and the popup does not disappear. Only when I click above the description does the popup close.
Is there anything else that can be done about it, or do I need to change the maps to OpenStreet?
Unfortunately the functionality is bad. I click on the cross sign and the popup does not disappear. Only when I click above the description does the popup close.
Is there anything else that can be done about it, or do I need to change the maps to OpenStreet?
Re: Close Popup
Posted: 12 Jun 2024, 18:30
Hi,
That's only about 1mm difference.
Kind regards
Christine
Fine.wezykowski wrote: ↑12 Jun 2024, 11:34 I placed the code on the website and it actually looks better visually.
Then as a compromise: change the padding-top: 2px !important; to: .... 0px! important;Unfortunately the functionality is bad. I click on the cross sign and the popup does not disappear. Only when I click above the description does the popup close.
That's only about 1mm difference.
Kind regards
Christine
Re: Close Popup
Posted: 13 Jun 2024, 09:15
I changed it.
However, closing the popup still does not work on the cross sign.
However, closing the popup still does not work on the cross sign.