CSS for popups

  • Resolved landwire

    (@landwire)


    11 years ago

    Hi Robert,
    I have seen a post about marker names in popup and css was mentioned there too, but I thought I open a separate ticket.

    I had to “hack” your showmap.php (it’s the only file I changed and just the inline styling of the popup) just to get rid of the border that is introduced with (Directions). I also did not like the brackets. Is there a better way of making those changes yet? I guess a class for that div would help and no inline styling.

    An odd thing and maybe you could enlighten me on where to look. Could you look at those three links (all the same marker – it’s the one in China) show up different popups:

    I understand this one:
    modified marker pop-up from showmap.php – Get Directions (no border/no brackets): https://2013d.landwire.net/project/bhub/

    I guess a different “template” is used NOT showmap.php – which one?
    same marker on layer map – here it has (Directions) again with brackets: https://2013d.landwire.net/world-map-of-projects/

    Fullscreen is totally chaotic – also the “arrows” of the popup box are at totally wrong places. Does the changes of the popup size not get applied there?
    on full screen: https://2013d.landwire.net/wp-content/plugins/leaflet-maps-marker/leaflet-fullscreen.php?layer=1

    Thanks,
    S

    https://www.ads-software.com/plugins/leaflet-maps-marker/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Robert Seyfriedsberger

    (@harmr)

    Hi Sascha,
    hacking showmap.php is not recommended as this breaks upgrade compatibility (changes get overwritten on each update).

    regarding world map of projects: the popup content here is loaded with geojson array but is basically the same as when loaded on a marker map.

    regarding fullscreen: popup size also gets applied here, dont really know what you mean by “arrows”.

    For a future pro release I plan to add support for filter which will allow users to change certain elements without having to hack plugins files…
    best,

    Robert

    Thread Starter landwire

    (@landwire)

    Thanks,
    I really do not like changing core plugin files, but I could not find any other way to remove the border AND change that text AND remove the brackets. I usually keep a pretty good track/documentation of what I have changed and then have to spend some time to apply those changes again on each update ??

    Test below are without any core changes!!!
    If you look at the fullscreen shot at:

    https://2013d.landwire.net/wp-content/plugins/leaflet-maps-marker/leaflet-fullscreen.php?layer=1

    1. Click on the marker in Australia
    2. Image in popup does not increase the popup size -> looks nasty
    3. little white triangle at the bottom of that popup does NOT point to the marker. On https://2013d.landwire.net/project/popup-test/ it does.

    I assume that is some bugginess.
    S

    Thread Starter landwire

    (@landwire)

    Ok, css was never my forte. When something floats you have to clear it. Or something like that. I will get there. Sorry to bother you with that.

    Some css customisation options on popups would be awesome though. Even if it is with basic classes added, that then can get overridden my one’s own css rules.
    S

    Plugin Author Robert Seyfriedsberger

    (@harmr)

    ok, now I understand the issue. I will add clear:both to the directions div

    <div style=”border-top: 1px solid rgb(240, 240, 231); margin-top: 5px; padding-top: 5px; clear: both;”> (Directions)</div>
    in the next release and then popup text should always display properly – also with image floats.
    thx,
    Robert

    Thread Starter landwire

    (@landwire)

    Well, I think it was my mistake as I introduced a floating image. What I did to solve my problem is create a div for image and text, then set overflow:hidden on that div. So I am not sure if your code change is necessary. But I guess it helps beginners like me ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS for popups’ is closed to new replies.