Calculator display bug in chrome

Hello @carnagelp

Thank you very much for using our plugin. In the first form the on-click event of calculated button is:

jQuery('.cff-container-field.hide').removeClass('hide');

But you want to show the second form and not a container field.

The correct would be to assign the hide class to the second form:

[CP_CALCULATED_FIELDS id="2" class="hide"]

And the button code would be: jQuery('form.hide').removeClass('hide');

In the second form the “Label Placement” attribute (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png) was configured as “Right Aligned”. If you want to display the labels over the fields and centered, you should select “Top Aligned” and assign custom class names.

For example, you can enter the class name custom-field through the “Add CSS Layout Keywords” in the fields’ settings, and enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab:

#fbuilder .custom-field>label{display:block !important; text-align:center !important;}

Finally, the calculate button has a black background with is text in white color:

Best regards.

I think I didn’t communicate the problem properly. Let me try again:

The forms load perfectly fine when opening the page in firefox. See screenshots here:
https://ibb.co/K64NvVz
https://ibb.co/KmFzN2B

However, the same form loads incorrectly in Chrome as seen below:
https://ibb.co/RP40yFG
https://ibb.co/xCyRbC9

1) The contents of the form are supposed to be center aligned with the label on the side (not top).
2) The “Results” section of the page is supposed to show up only upon clicking calculate in the first screenshot. This happens in Firefox but in Chrome, the “results” section is shown by default even before you hit Calculate
3) The white text of calculate can’t be seen when opened in Chrome.

Hope this clarifies

Hello @carnagelp

I tested your form with Chrome browser and it is working fine. Please, watch the video by visiting the following:

https://resources.developers4web.com/cff/tmp/2022/06/20/video_o.mp4

So, I guess the issue could be related to your browser’s cache or a browser’s extension.

Best regards.

Okay… I checked it now and it seems to be working fine.

HOWEVER, there’s another issue. Accessing the same page on a mobile browser (chrome) results in none of those forms being shown at all.

Please see this screenshot: https://ibb.co/1m0RRp7
You can only see 3 lines where the calculators are supposed to be

I tried clearing the cache here but it doesn’t work.

Not sure why this is happening :/

Hello @carnagelp

The issue is caused by the plugin you are using to manage the website’s cache. Please, try calling the URL with the no-cache parameter:

https://www.fitgirls4life.com/pcos-diet-plan/?no-cache=1

Best regards.