Issue with custom component.... Need some guidance....

Hello all,

I am developing a custom component for the municipality that I work for. This component will allow municipalities or utility companies to basically keep detailed information about the utility asset, such as type, location, notes, maintenance information etc. One of the major features of this component is the ability to store lat/long information via google maps. The issue I am having is that I can get the google map implementation to work just fine on the admin side of the component, BUT when I access the component on the public side and edit an entry, the google map is greyed out. I've installed a jquery no-conflict plugin and it did not help. Im pretty sure that there is a conflict somewhere between the template and the component some where, I just cannot figure out where. I've included a couple screen shots for reference.

Thanks again in advance for your help and guidance.

google_maps_working.png

google_maps_issue.png

Hi

For start please check if the same is happening when a default template is selected. If not, than show me Your site so I'll see.

Hi

For start please check if the same is happening when a default template is selected. If not, than show me Your site so I'll see.

Hello,

Thank you for your reply. I have checked against the default theme, and it works as it should. I am developing this component on a local server, so I will have to migrate it over to an external server so that you can take a look at it. Give me a day or so that I can get that accomplished. I will post back when I have that setup and ready to go.

Thanks again for your help,

Tim

Hi

Ok. I'll be waiting.

Hello,

I am sending you the login information as a pm to you.

Hi

I can see that You have at least 3 different version of jQuery loaded for edit page. It may not be the problem causing it, but it can se it will be good to eliminate it. Please try install easyjquery plugin and make it to use just one jquery version.

Hi

I can see that You have at least 3 different version of jQuery loaded for edit page. It may not be the problem causing it, but it can se it will be good to eliminate it. Please try install easyjquery plugin and make it to use just one jquery version.

Hello,

I've uninstalled the other two plugins that were not being used, plus eliminated the jquery call within the script itself. There should be only one call for jquery now.

Hi

Ok it was not javascript conflict, but a responsive css

Please add this to css and everything should be fine:

Code: Select all

section #map img {
    width: auto !important;
}


Hello!

Sorry to ask, but which css file do I need to modify? I've added that bit of css to the style css files and the override css file for the template, but it hasn't made any difference. As always, thank you for your help.

Tim

Hi

Override.css is the correct one. Sorry I've missed one more attribute affecting that. Try this code:

Code: Select all

section #map img {
    max-width: none !important;
    width: auto !important;
}


Perfect!! Works like a champ!

Thank you so much for your help!

Best wishes!

Tim