Close Popup

[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

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

Jan

[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;
}

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]

It's about Google Maps.

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

Open Street Maps are working properly.

[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:



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]

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]

Hi,

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]

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