Close Popup

Phoca Maps - displaying maps in Joomla! CMS
wezykowski
Phoca Newbie
Phoca Newbie
Posts: 8
Joined: 18 Oct 2021, 21:38

Close Popup

Post by wezykowski »

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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48345
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Close Popup

Post by Jan »

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. :idea:

Jan
If you find Phoca extensions useful, please support the project
christine
Phoca Hero
Phoca Hero
Posts: 2808
Joined: 28 Nov 2010, 17:20

Re: Close Popup

Post by christine »

Hi,

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;
}
Jan wrote: 09 Jun 2024, 16:16 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.
You could try, to play around - for example:

Code: Select all

.leaflet-container a.leaflet-popup-close-button {
top: 10px;
}
whatever you want to change (to your custom.css from your template).

Kind regards
Christine
wezykowski
Phoca Newbie
Phoca Newbie
Posts: 8
Joined: 18 Oct 2021, 21:38

Re: Close Popup

Post by wezykowski »

It's about Google Maps.

The map is available at https://zachodslonca.pl/mapa

Open Street Maps are working properly.
christine
Phoca Hero
Phoca Hero
Posts: 2808
Joined: 28 Nov 2010, 17:20

Re: Close Popup

Post by christine »

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).

Code: Select all

button.gm-ui-hover-effect {
height: 20px !important;
padding-right: 30px !important; 
padding-top: 2px !important; 
padding-left: 90px !important;  
}
I inserted above temporarily on your page, it would look like this:

Image

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
wezykowski
Phoca Newbie
Phoca Newbie
Posts: 8
Joined: 18 Oct 2021, 21:38

Re: Close Popup

Post by wezykowski »

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?
christine
Phoca Hero
Phoca Hero
Posts: 2808
Joined: 28 Nov 2010, 17:20

Re: Close Popup

Post by christine »

Hi,
wezykowski wrote: 12 Jun 2024, 11:34 I placed the code on the website and it actually looks better visually.
Fine.
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.
Then as a compromise: change the padding-top: 2px !important; to: .... 0px! important;

That's only about 1mm difference.

Kind regards
Christine
wezykowski
Phoca Newbie
Phoca Newbie
Posts: 8
Joined: 18 Oct 2021, 21:38

Re: Close Popup

Post by wezykowski »

I changed it.
However, closing the popup still does not work on the cross sign.
Post Reply