Seems that CSS is missing from Google Maps directions list

Hi,

In looking within google_maps_user.css file it seems that the directions list which is generated through the plugin is missing the CSS. Is there any sample CSS for this section which creates a reasonable looking table from the generated output?

  • Vinod Dalvi

    Hi @Graeme,

    Thank you for your quick reply.

    I checked it on my test site using default WordPress theme Twenty Twelve and it's working fine. See the attached screenshot.

    Which theme are you using?

    May be there can be a theme / plugin CSS conflict with map directions list therefore it's displaying like this.

    You can style directions list using CSS classes like following to look it awesome.

    div.agm_mh_directions_container
    input.agm_mh_close_directions
    a.agm_mh_travel_type
    agm_waypoint_a
    a.agm_mh_swap_direction_waypoints
    input.agm_waypoint_b
    input.agm_mh_get_directions
    div.agm_mh_directions_panel

    You can add it in Additional CSS field of Google Maps Plugin Options from the path

    Admin -> Settings -> Google Maps

    You can also add it in a child theme or using any of the following plugin so that it will not get lost after updating the parent theme or plugin.

    http://wordpress.org/plugins/my-custom-css
    http://wordpress.org/plugins/simple-custom-css
    http://wordpress.org/plugins/imporved-simpler-css/
    http://jetpack.me/support/custom-css/

    Kind Regards,
    Vinod Dalvi

  • Graeme

    Hi Vinod,

    I am using full-width template. The default map width is/was set to 300px (original configuration). I had responsive maps turned ON as I wish to have a responsive site, I turned this OFF to see if this affected anything, and no it did not.

    Can you please provide me with CSS styling for this component? (and no I don't mean just provide me with the DIV tags like you already have done. Please provide me with a basic styling which has the table properly formatted and text aligned to the left.

    Thanks

  • Vinod Dalvi

    Hi @Graeme,

    I couldn't reproduce the problem you are having on my test site.

    Please provide me with a basic styling which has the table properly formatted and text aligned to the left.

    The text is already aligned to the left in table cell.

    If you reduce the Default map width then it will display properly but as you have said earlier "default map width is/was set to 300px" then it should display properly.

    In provided screenshot it doesn't seem it is having 300px width, Is it?

    Can you just copy and paste html source code from your page to http://pastebin.com/ and share me the link so that it will help me to provide you CSS solution?

    To know how to get html source code visit following page
    http://www.wikihow.com/View-Source-Code

    Regards,

  • Graeme

    Hi Vinod,

    Can you provide me with your HTML and your CSS code which has the text-align to the left for the table cell? Can you also show me both your site and the associated HTML source code from your web browser where I can see the hierarchy of CSS being called/used by the web browser to render the page?

    Simple reason: I do not believe that you and I are using the same source code and if we are, I do not believe that the table contents would render to the left if the width of the table is greater than 300px on your site. (which happens on my site if the table is set to be responsive.)

    Also, I'd prefer you did not respond to me with level 0 responses and as if I were an idiot. Sending me links from WikiHow on how to view source code demonstrates that you have absolutely no respect for any of your customers.

  • Vinod Dalvi

    Hi @Graeme,

    Thank you for your reply.

    Can you provide me with your HTML and your CSS code which has the text-align to the left for the table cell? Can you also show me both your site and the associated HTML source code from your web browser where I can see the hierarchy of CSS being called/used by the web browser to render the page?

    I have attached html and css code to this reply. I am doing it on localhost so i have told one of my colleague to create map page for you to see, visit this page http://vaughanmontgomery.co.uk/maps/ to see it.

    Also, I'd prefer you did not respond to me with level 0 responses and as if I were an idiot. Sending me links from WikiHow on how to view source code demonstrates that you have absolutely no respect for any of your customers.

    Sorry if i have failed to respect you but this was not my intention. I only want to resolve your issue ASAP and i don't want to waste your time in replies therefore i try to help you all the cases in one reply. It's good that you know all of these things but how do i come to know that you know it?

    We have many members who don't WordPress at all and we have to help them from scratch. Some of them when download our plugin expect it in EXE format to install :slight_smile:
    By providing this type of information helps to prevent any confusion as I'm sure you understand.

    Kind Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi @Graeme,

    Are you using Appointments+ plugin?
    Is it working fine if you deactivate Appointments+ plugin?

    Try adding following CSS code in your site by using any of the following plugins or by adding it in stylesheet file of your child theme.

    .agm_google_maps .agm_mh_directions_container td {
    width: auto;
    }

    Let me know whether it resolves your problem or not.

    http://wordpress.org/plugins/my-custom-css
    http://wordpress.org/plugins/simple-custom-css
    http://wordpress.org/plugins/imporved-simpler-css/
    http://jetpack.me/support/custom-css/

    Regards,
    Vinod Dalvi

  • Graeme

    Hi Vinod,

    I do have appointments+ plugin, but as mentioned previously, I turned off all plugins using twentytwelve theme to test whether there was a conflict with my preferred theme and/or any of the plugins I have installed. The issue remained.

    A little tip for when providing front-line support. Read what people actually write so you can eliminate potential issues and focus on determining what is really at fault. This saves both you and the person you are assisting time.

    I have since moved onto a different plugin to provide Google Maps support for my website. However, to assist others experiencing similar issues I have tested your suggestions.

    Adding the following CSS to the Google Maps Plugin additional CSS field fixes the formatting issues. This is the missing CSS which should be in google_maps_user.css within the plugin's supplied package.

    .agm_google_maps .agm_mh_directions_container td {
    width: auto;
    }

    To thoroughly test the robustness of this solution, I tested several combinations of activated/deactivated plugins for the site and themes. This seems to work for all cases I have on my site.

  • Vinod Dalvi

    Hi @Graeme,

    Thank you for replying and testing the provided solution.

    I found that the following CSS code defined in "Additional CSS Rules" field of Appointments+ plugin Settings causes to break the styling of Google map directions list.

    .entry-content td{border:none;width:50%}

    The Google map directions list styling doesn't break if we deactivate Appointments+ plugin.

    The Appointments+ plugin was not active on my test site therefore i was not able to reproduce the same issue you are having on my test site which i could do after activating it.

    You can use the above solution as a patch for now. I have notified the developer to fix it in plugin.

    Please advise if you have more questions.

    Thank you for being a WPMU DEV member and have a great day!

    Take care.