Infowindow style is not good at all.

New home Forums Pro Add-on Troubleshooting Infowindow style is not good at all.

Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #61669
    nsodha
    Participant

    Hi ,
    I have just installed your plug in and started my store locator map. When I click o any marker, the info window that opens up looks awful. It covers the entire height of the map and half the width and is all black with white text. Whys is that? See attachment

    Attachments:
    You must be logged in to view attached files.
    #61676
    AbelC
    Moderator

    Hi There,

    Thank you so much for getting in touch with us, and our sincere apologies for the inconvenience.

    Could I kindly ask if you could please provide us with a link to your map page?

    We will then be able to take a closer look at what is causing this issue and advise further.

    With that said, you will be able to change the InfoWindow width by navigating to Maps -> Settings -> InfoWindows -> Scroll down to “Max InfoWindow Width” -> Please set your preferred width.

    Again, we do apologize for the inconvenience.

    I look forward to hearing back from you, and resolving this issue ASAP.

    Kind Regards,
    Abel

    #61682
    nsodha
    Participant

    Hi,

    My page link is netlytix.com/map
    I tried setting the width as you suggested but the infowindw still hosws up same height and width and is all black in color.
    Thanks
    Naval

    #61686
    AbelC
    Moderator

    Hi Naval,

    Thank you so much for getting back to me.

    It appears that this could be due to 3rd party plugin or theme conflict.

    Could I kindly ask if you could please confirm your preferred text and background color?

    Could you also please confirm your preferred InfoWindow size?

    I will then be able to prepare the custom CSS needed to achieve this.

    I look forward to hearing back from you and assisting you further.

    Kind Regards,
    Abel

    #61695
    nsodha
    Participant

    Hi Abel,

    The preferred background for the info window is white.
    The text is Arial with font size of 12. Perhaps you can tell me where you set the values and I can change them later.
    I am not sure about the size of the window but if you can check this out (https://www.knightspharmacy.co.uk/stores.php) you can see the window size I need.
    Also will you be able to tell me where I can change the look and feel of some of the filter buttons etc, since right now it is plain HTML only.
    Thanks/Naval

    #61707
    AbelC
    Moderator

    Hi Naval,

    Thank you for getting back to me.

    Could I kindly ask if you could please navigate to Maps -> Edit -> Advanced Settings -> Scroll down to “Infowindow Style” -> Please enter the following in the “Infowindow Colors” block:
    Primary Color – FFFFFF
    Accent Color – FFFFFF
    Text Color – 133A25

    Could you also please navigate to Maps -> Settings -> Advanced -> Custom CSS -> Please paste the following CSS to change the height and width of the InfoWindow and correct the styling issues:

    #wpgmza_iw_holder_2{
      width: 300px !important;
      max-width: 300px !important;
      min-width: 300px !important;
      height: 200px !important;
      max-height: 300px !important;
    }
    
    #wpgmza_iw_holder_2 .wpgmza_iw_image{
      height: 100px !important;
      width: 100% !important;
    }
    
    #wpgmza_iw_holder_2 .wpgmza_iw_address{
      width: 100% !important;
      left: 0 !important;
      text-align: center !important;
    }
    
    #wpgmza_iw_holder_2 .wpgmza_iw_description{
      width: 100% !important;
      left: 0 !important;
      text-align: center !important;
    }
    
    #wpgmza_iw_holder_2 .wpgmza_iw_title{
      width: 100% !important;
      left: 0 !important;
      text-align: center !important;
    }
    
    #wpgmza_iw_holder_2 .wpgmza_iw_buttons{
      width: 90% !important;
      left: 0 !important;
      text-align: center !important;
      margin: auto !important;
    }

    Please do let me know if you are happy with the changed made so far?

    – Also will you be able to tell me where I can change the look and feel of some of the filter buttons etc, since right now it is plain HTML only

    Unfortunately, it is only supported to change the button styles using Custom CSS at the moment.

    With that said, could you please confirm your preferred look and feel of the buttons as we should then be able to prepare Custom CSS code to achieve this?

    I look forward to hearing back from you.

    Kind Regards,
    Abel

    #61709
    nsodha
    Participant

    Hi Abel,

    That worked.
    However I have a couple of questions:
    1.With the change you suggested in CSS, does that mean my info windows will always be a fixed size and format?
    2. Also the page I am trying to emulate is this: https://www.knightspharmacy.co.uk/stores.php. As you can see,the infowindows on this map move to just above where the marker is. Is that possible in your product?
    3. See attached what happens when I have a header (Knights Arcade Pharmacy) and the text describing the location (This is a test ….). There is overlapping on the page. Is it possible to fix that?

    Attachments:
    You must be logged in to view attached files.
    #61714
    AbelC
    Moderator

    Hi There,

    Thank you so much for letting me know, and that is great to hear.

    Please find my response below:

    1. The custom CSS provided should only set a fix width and height to the InfoWindow on Map ID 2.

    2. Yes, this is supported with our Default InfoWindow Style by navigating to Maps -> Edit -> Advanced -> InfoWindow Style -> Please select the “Default InfoWindow” style.

    Please note that we do recommend that you remove the Custom CSS provided as this should only work for the Modern InfoWindow style.

    Please also note that you can add a marker listing in the map by using the Modern Marker Listing style (Maps -> Edit -> Marker Listing Options -> Scroll down to “Marker Listing Style”.

    Please see our demo here -> https://www.wpgmaps.com/demo/map-with-marker-listing-modern/

    3. Could I kindly ask kindly ask if you could please add the following custom CSS below to correct this issue:

    #wpgmza_iw_holder_2 .wpgmza_iw_title{
      position: absolute !important;
          height: fit-content !important;
        padding: 0 !important;
    }
    
    #wpgmza_iw_holder_2 .wpgmza_iw_address{
          margin-top: 10px !important;
    }

    I hope this helps clarify, and I look forward to hearing back from you.

    Kind Regards,
    Abel

    #61719
    nsodha
    Participant

    Thank you so much for your fast responses!!
    Take a look at the attachment. Why is it that in my info window the image is at the top and the title and the address is at the bottom?

    In the example you gave me(https://www.wpgmaps.com/demo/map-with-marker-listing-modern/), the infowindow is reversed.

    Thanks/Naval

    #61720
    nsodha
    Participant

    Abel,
    Sorry cannot attach file because it is too large. But go to netlytix.com/map and you will see what I mean
    Naval

    #61731
    AbelC
    Moderator

    Hi There,

    Thank you for letting me know.

    Could I kindly ask if you could please add the following Custom CSS below to correct this:

    .wpgmza-popout-panel.wpgmza-modern-marker-listing-marker-view.wpgmza-open [data-name="title"]{
          position: absolute;
        height: fit-content;
        width: 100%;
        margin-top: 20px;
    }
    
    .wpgmza-popout-panel.wpgmza-modern-marker-listing-marker-view.wpgmza-open [data-name="address"]{
       height: fit-content;
        width: 100%;
        margin-top: 50px;
    }
    
    .wpgmza-popout-panel.wpgmza-modern-marker-listing-marker-view.wpgmza-open [data-name="description"] img{
        position: absolute;
        margin-top: 120px;
    }

    Please do let me know if you are happy with the changes made so far?

    I look forward to hearing back from you.

    Kind Regards,
    Abel

    #61733
    nsodha
    Participant

    Great Job, Abel.

    Looking better now.
    One issue I have noticed that the icons on the top corners of the info windows ( for directions etc) do not render properly on Firefox or IE, but work fine on Chrome.

    What size image shall I add to the info-window. Can you recommend a size?
    Thanks/Naval

    #61745
    AbelC
    Moderator

    Hi Naval,

    Thank you for letting me know, and that is great to hear.

    1. Could I kindly ask if you could please send a screenshot of the issue you are currently experiencing to [email protected]

    I will then be able to advise further.

    2. We do not have a recommend size for the images in the InfoWindow, however, 200x200px should display as intended in the InfoWindow.

    I look forward to hearing back from you.

    Kind Regards,
    Abel

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.