Progressive profiling field display issue

[ahaiko]

Some time ago, fields for progressive profiling were added to our website.
However, in the Chrome browser, progressive profiling fields are not displayed at all (in the settings it is specified to show one of two). The field appears in the Firefox browser, but it does not have a label. I disabled all custom CSS styles, but this did not affect the display of fields: it is still missing in Chrome and without a label in Firefox.
I didn't find anything similar in the topics.

I'm wondering if there are any known issues with the display of progressive grading fields in general, as well as their operation?
Can this be resolved through the efforts of the site developers or are there other options? Is there a way to put progressive profiling fields along with a group of regular fields? Perhaps this would solve the problem.

[SanfordWhiteman]

Please link to your page. There's no other way to troubleshoot your setup. Oops, the link was there. Looking at the page now.

[ahaiko]

I thought I included the link in the first sentence. I'll duplicate this again: https://clearstateupst.wpengine.com/progressive-profiling-form-test.

I also noticed that the Progressive profiling field also appears in Chrome, but it is still without a label.

[SanfordWhiteman · Accepted solution]

Ah, I missed the link when reading on my phone earlier.

Your issue is because you’re hiding the <label> element in line 7103 of frontend.css:

.mktoForm .mktoFormRow:nth-last-child(5) .mktoLabel { display: none; }

There are other CSS rules in that same file affecting the form.

It’s generally bad to use :nth-child/:nth-last-child to style forms, as any change to field order — including by Visibility Rules or Progressive Profiling — breaks the layout.

[ahaiko]

It seems that when I disable custom styles, the field still has no label. I'll check again. Thank you!

[ahaiko]

Indeed, these styles were defined in another file. Thank you very much again!