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
Close Popup
- Jan
- Phoca Hero
- Posts: 48345
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Close Popup
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
If you find Phoca extensions useful, please support the project
-
- Phoca Hero
- Posts: 2808
- Joined: 28 Nov 2010, 17:20
Re: Close Popup
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
-
- Phoca Newbie
- Posts: 8
- Joined: 18 Oct 2021, 21:38
Re: Close Popup
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.
-
- Phoca Hero
- Posts: 2808
- Joined: 28 Nov 2010, 17:20
Re: Close Popup
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
-
- Phoca Newbie
- Posts: 8
- Joined: 18 Oct 2021, 21:38
Re: Close Popup
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?
-
- Phoca Hero
- Posts: 2808
- Joined: 28 Nov 2010, 17:20
Re: Close Popup
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
-
- Phoca Newbie
- Posts: 8
- Joined: 18 Oct 2021, 21:38
Re: Close Popup
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.