New home › Forums › Pro Add-on › General queries › Custom Field Positioning within Info Window
Tagged: css, infoWindow
- This topic has 11 replies, 2 voices, and was last updated 1 year, 7 months ago by Steven.
-
AuthorPosts
-
January 13, 2022 at 11:52 pm #71939SChampagneParticipant
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.January 14, 2022 at 8:13 am #71942StevenModeratorHi 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 BeerJanuary 14, 2022 at 3:58 pm #71952SChampagneParticipantYes, you can view the test page here: https://www.secondwindtiming.com/map/
January 14, 2022 at 6:23 pm #71956SChampagneParticipantActually, 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”.
January 18, 2022 at 2:18 pm #71993StevenModeratorHi 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 BeerJanuary 19, 2022 at 7:07 pm #72009SChampagneParticipantThanks, 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.
January 20, 2022 at 2:52 pm #72027StevenModeratorHi @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 BeerJanuary 20, 2022 at 5:12 pm #72030SChampagneParticipantThis reply has been marked as private.January 26, 2022 at 6:42 pm #72092SChampagneParticipantHi, Steven.
Have you had a chance to look at this at all?
January 27, 2022 at 8:10 am #72097StevenModeratorHi @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 BeerJanuary 27, 2022 at 3:29 pm #72099SChampagneParticipantThat worked!
Thank you.
January 31, 2022 at 8:45 am #72107StevenModeratorHi @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 -
AuthorPosts
- You must be logged in to reply to this topic.