Custom Field Positioning within Info Window

[SChampagne]

Is there a way to specify the position of a custom field within the infoWindow via CSS?

For example, I created a custom field for “date”. I would like to position that directly under the title, rather than it’s default position at the bottom of the window.

Attachments:

You must be logged in to view attached files.

[Steven]

Hi there,

Thank you so much for getting in touch, we really appreciate your time.

Might I kindly ask you to provide us with a link to your map page as I do believe I am able to help with some relatively simple Custom CSS.

I look forward to hearing back from you.

Kindest Regards,
Steven De Beer

[SChampagne]

Yes, you can view the test page here: https://www.secondwindtiming.com/map/

[SChampagne]

Actually, also looking for CSS that would change the URL Link Text based on Map ID.

For example, if mapID=X then it should say “Registration Link.” If mapID=Y, then it should say “Results Link”.

[Steven]

Hi again,

Thank you so much for your time and patience.

Could I kindly ask you to add the following custom CSS to the custom CSS field?

.wpgmza-infowindow {
    display: flex;
    flex-direction: column;
}

p {
    order: 10;
}

.wpgmza_infowindow_title {
    order: 1;
}

[data-custom-field-id="1"] {
    order: 2;
}

.wpgmza_infowindow_address {
    order: 3;
}

.wpgmza_infowindow_description {
    order: 4;
}

.wpgmza_infowindow_link {
    order: 5;
}

As for the script to determine the link text, could I kindly ask you to add the following to your custom JS field?

jQuery(window).on("infowindowopen.wpgmza", function(event) {
		var infoWindow = event.target;
		var mapId = WPGMZA.maps[0].id;

		if (mapId === '3') {
			jQuery("a.wpgmza_infowindow_link").text("Registration Link");

		} else if(mapID === '4') {
			jQuery("a.wpgmza_infowindow_link").text("Results Link");
		}
});

Kindly adjust the map IDs accordingly to your specific Map Ids and confirm?

I look forward to hearing back from you.

Kindest Regards,
Steven De Beer

[SChampagne]

Thanks, Steven.

The positioning CSS is working well.

The javascript is not, however. The map currently displaying on staging4.secondwindtiming.com is mapID=4 and shows whatever is set in Maps -> Settings -> InfoWindows -> Link Text.

[Steven]

Hi @SChampagne,

May I kindly ask if you would be open to creating a temporary admin account for me to log in with so that I can adjust the script and ensure this works for your site?

If open to this, kindly confirm submit a support ticket to our desk or via a private response on these forums.

I look forward to hearing back from you.

Kindest Regards,
Steven De Beer

[SChampagne]

This reply has been marked as private.

[SChampagne]

Hi, Steven.

Have you had a chance to look at this at all?

[Steven]

Hi @SChampagne,

Thank you so much for getting back to me and my apologies for the delay.

Could I kindly ask you to test this once more as I have made a few changes to the script?

I look forward to hearing back from you.

Kindest Regards,
Steven De Beer

[SChampagne]

That worked!

Thank you.

[Steven]

Hi @SChampagne,

Thank you so much for getting back to me.

Not a problem at all, I am glad this has helped.

Do have a great week ahead!

Kindest Regards,
Steven De Beer

[Author]

Posts