Labels overlapping text-fields

Hi @davidmanniss

It’s very strange that this happened in the premium version but not the free version.

I’m definitely happy to help but is it possible for me to view your site live so that I can debug? You can email me the link if you like (I see you have my email address, forwarded by Richard).

Thanks,
Angus

Hi, Angus

I think I’ve discovered the issue, but no solution.
This plugin doesn’t play nicely with the Divi theme, it seems.

I’ve been slowly updating my site themes to Divi – and I now believe this is where the clash is happening.
> For example, I can change the colours and styling of the form elements in the MD panel – but they are not being applied properly.

And adding any other plugin, like one for GDPR compliance, makes things even worse.
While the GDPR plugin I use works just fine with plain Contact 7 forms and Divi, once the Material Design plugin is active the styling/CSS goes awry.
> For example, inserting a line of text in the form… instead of a standard format paragraph, the text is now squeezed into multiple tall, thin columns.

In short: the plugin doesn’t work out of the box with Divi or a few other plugins.

I’m not a developer, and I only dabble with basic CSS form styling: so it may be something obvious to fix, but I can’t seem to do it in the MD plugin itself – and ease-of-use/quick roll-out styling application was why I purchased this plugin.
> For now I’m removing the plugin and using basic CSS styling on Contact 7 I’ve created myself. As while it’s not as ‘pretty’, at least the form isn’t broken.

I can’t see a simple cheat-sheet/CSS reference for the various MD form elements – if there is one (sorry if I missed the obvious) I will try having a go at overriding Divi settings myself at some point.

Hi @davidmanniss

The issue you’re experiencing with text is due to you not placing any additional elements into a [md-raw] tag. This is because Material Design uses CSS grid and if you don’t explicitly set the width of an element in a grid, it is set to a single column. Simply wrapping it in [md-raw] will fix this issue.

There’s a “cheat sheet” that outlines all the shortcodes and more, you can access it by clicking the “Help” tab at the top right of the screen while editing your form, or by clicking the “Documentation” link in the Material Design box on the right of the form editor.

I’m happy to help you resolve the issues with Divi, but I’ll need to be able to see your website (just the front end is fine) so that I can debug and let you know how to fix it. It will also allow me to fix it for potential future users.

Thanks,
Angus

• This reply was modified 5 years, 7 months ago by Addons for Contact Form 7.