CSS problem between FC and googlemaps (mike reumer)

Hello

I'm using Googlemaps (Mike Reumer) woth FC V1793 in J2.5 and J3.1.5 sites.

The plugin works correctly except one thing (the direction form included in a Google Map doesn't display the direction (from this address/ to this address).

I sent a mail to Mike Reumer. I answered me that the problem comes from a CSS generated by FC.

I display here the content of his mail :

Hello Michel,

The problem is caused by the css file naouri-market.com/components/com ... i_form.css (line 40):
input[type=checkbox]:not(old).fc_checkradio,input[type=radio ]:not(old).fc_checkradio,[name="adminForm"] input[type=checkbox]:not(old),[name="adminForm"] input[type=radio ]:not(old),.flexicontent input[type=checkbox]:not(old),.flexicontent input[type=radio ]:not(old) {
width: 24px !important;
width: 19px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
display: none !important;
}

This css rule should not be applied. I am not sure what it does and how to change it.

It will work if display is block and opacity is 1.

Let me know if you can solve it.

I prefer not directly update the FC CSS.

Can you tell me what I can do to solve this problem.
You can get an exemple of the display at this address : naouri-market.com/index.php/ile- ... -vincennes
(This site is a J2.5 one).


thank you very much

best regards

Michel

Hello

you have a Javascript error in your page,
mainly because some extension tries to use a jQquery UI function that is missing

- use jQueryEasy plugin to make sure that jQuery / jQuery UI is loaded properly and only once


- about your question the CSS that you posted here effects checkboxes, is the hidden element a form checkbox ?

about the css :
the hidden element is a radio button

I display here the valid form (from tech.reumer.net) and the problematic one (from naouri-market.com).
[attachment=1:1izvqvr0]<!-- ia1 -->plan_ville_reumer.jpg<!-- ia1 -->[/attachment:1izvqvr0]

[attachment=0:1izvqvr0]<!-- ia0 -->plan_ville.jpg<!-- ia0 -->[/attachment:1izvqvr0]

About the carousel : I check and I send you the result

best regards

Michel

Hello

-- yes the CSS code effects exactly checkbox and radio

i will check the URL and post back here, possibly making the CSS code more specific

-- about jQuery/jQuery UI loading,
it is not related to your CSS issue
but you need to fix this too, please try the plugin i suggested

Regards

Hello

you have this:

Normally the HTML will add a <label> after the checkbox or radio input
(that optional also has a for parameter)

So "Vers le magasin" AND "Depuis le magasin" should be inside <label>

you may send this to the developer, but i will see if we can exclude 3rd party code generally

otherwise i will suggest you a CSS fix

Regards

thanks for reporting to dev !

Of course,
I have got from Mike Reumer the beginning of a solution, but it's not optimal.

I'm waiting his answer and I send to copy on the forum.

best regards

Michel

I have received the solution from Mike Reumer :

Thank you for the answer of the developer of Flexicontent.

It is not the html that adds a label entity after a checkbox or radio input, but has to be done by the logic so my plugin.
The label entity has new features since HTML5 and not in previous versions so it was not necessary to add it.
I will put it on the list of changes to add labels on the titles of input fields. I will inform you when it is done and send you a new version.

The suggestion to add label will not solve the problem, because the css of flexicontent will still style the object and it will show a radiocontrol that does not work. So the developer should set his css styling only for his extension as he mentioned too.

For the short term, I advice to add the following css to your template css or to the map css parameter at the configuration of the plugin:
.map input[type=radio ]:not(old) {
opacity : 1 !important;
display: inline-block !important;
}

What I did to solve the problem :

For each article able to use a google map, I have created fields to enter the different parameters used in the {mosmap...} plugin.

I have also created a field which copy all parameters needed to create the map. a '|' separates each parameter. In the prefix of the this variable I give [plan] and [/plan] in the suffix.

I get this data [plan]param_1|param_2|....|parma_n[/plan]

I use REREPLACER plugin (nonumber) to transform the [plan]...[/plan] in a mosmap plugin which will be displayed in the site.
This is done with a PHP script.

To solve the current problem I have just added the following HTML before the php script :

<style type="text/css">
.map input[type=radio ]:not(old) {
opacity : 1 !important;
display: inline-block !important;
</style>

best regards

Michel

Hello

i will see to exclude this CSS for all frontend views, except for item form,

Regards

thank you very much.

best regards

Michel