alex404

Hello Sir, @gusruss89
Now it’s working fine, I just edited a few lines of code in

/var/www/html/wp-content/plugins/material-design-for-contact-form-7/assets/js/cf7-material-design.js

As instructed/mentioned here at GitHub

You can see the code,

$('.cf7md-text, .cf7md-textarea').each(function() {
			var $this = $(this),
				$input = $this.find('input, textarea'),
				$span = $this.find('.wpcf7-form-control-wrap'),
				$tpl = $this.find('.cf7md-text-html').find('> div'),
				$label = $tpl.find('label');
			
			// I DECLARED THIS VARIABLE
			var text404 = $(this).val();
			// Move input
			$input.detach().prependTo($tpl);
			// Insert template
			$tpl.detach().appendTo($span);
			// Add md class to input
			$input.addClass('mdc-textfield__input');

						
			// MY CUSTOM CODE STARTS HERE
				
				if(text404 !== null) {
					$tpl.addClass('mdc-textfield--upgraded');
					$label.addClass('mdc-textfield__label--float-above');
				} else {
				//	$this.removeClass('mdc-textfield__input');
				}
				
			// MY CUSTOM CODE ENDS HERE

			//$if($this.hasValue)
			//$input.addClass('mdc')
			// Add 'for' to label
			$label.attr('for', $input.attr('name'));
			// Add autosize to textareas
			if($this.hasClass('cf7md-textarea-autosize')){
				$input.attr('rows', '2');
				autosize($input);
			}
		});

Tried with this code also

$(function(){
  
  $('.cf7md-form .wpcf7-form-control wpcf7-text wpcf7-validates-as-required mdc-textfield__input required form-control').focusout(function(){
    
    var text_val = $(this).val();
    
    if(text_val === "") {
      
      $(this).removeClass('has-value');
      
    } else {
      
      $(this).addClass('has-value');
      
    }
    
  });
  
});

But no Luck

Hello Sir @gusruss89

I think this bug/ error has something to do with this file “cf7-material-design.js”

Which is located here at my website:
/var/www/html/wp-content/plugins/material-design-for-contact-form-7/assets/js/cf7-material-design.js

I opened this file(cf7-material-design.js), it looks like (first few lines)

// This closure gives access to jQuery as $
// Don't delete it
(function($) {

	// Do stuff
	$(document).ready(function(){

		// === Running ID === //
		window.cf7mdId = 0;

Then I tried to add
this code

$.material.options.autofill = true;
 $.material.init();

and also this code
Materialize.updateTextFields();

After this “$(document).ready(function()” function, One by One
like this way

// This closure gives access to jQuery as $
// Don't delete it
(function($) {

	// Do stuff
	$(document).ready(function(){

		// === Running ID === //
		window.cf7mdId = 0;
                $.material.options.autofill = true;
                $.material.init();

And this way:

// This closure gives access to jQuery as $
// Don't delete it
(function($) {

	// Do stuff
	$(document).ready(function(){

		// === Running ID === //
		window.cf7mdId = 0;
                Materialize.updateTextFields();

But NO LUCK,
though I gave the whole day to resolve the issue.
I think this issue is very known issue, but yet it is unresolved, you may search over the internet…

Hello Sir, (GusRuss89 (@gusruss89))
I don’t know why my replies are not getting posted

Here is my web page, where I am getting the content and labels overlapping issue
http://jioselect.com/step1
Just fill the form, click Next, Get Back to Step 1 & Reload,
You’ll see contents overlapping

Note: I have tried the default theme of WordPress but no success.

Here are some list of issues you can find on the web:
Thread at GitHub

1#
Labels and text overlap in form if attribute ‘value’ set in input type ‘text’, ’email’. #180
https://github.com/Dogfalo/materialize/issues/180

2#
Labels overlapping prefilled content in forms #131
https://github.com/InfomediaLtd/angular2-materialize/issues/131

3#
Bootstrap Material design floating labels overlap input text

https://stackoverflow.com/questions/39577703/bootstrap-material-design-floating-labels-overlap-input-text

4#
MDL jquery: label overlaps the content into a input field
https://stackoverflow.com/questions/32579980/mdl-jquery-label-overlaps-the-content-into-a-input-field

Hello Sir @gusruss89,
here it is
http://jioselect.com/step1/
Just fill the form, click Next, Get Back to Step 1 & Reload,
You’ll see contents overlapping

Sir I have Also tried the default theme of the WordPress, but No luck.

Here are some similar issues I have found on the Internet:
https://github.com/InfomediaLtd/angular2-materialize/issues/131

https://github.com/Dogfalo/materialize/issues/180

At StackOverFlow
https://stackoverflow.com/questions/32579980/mdl-jquery-label-overlaps-the-content-into-a-input-field

https://github.com/google/material-design-lite/issues/243

You can find alot more here
Google Search “stackoverflow.com: material design labels overlaps”

• This reply was modified 8 years, 10 months ago by alex404.
• This reply was modified 8 years, 10 months ago by alex404.
• This reply was modified 8 years, 10 months ago by alex404.
• This reply was modified 8 years, 10 months ago by alex404.
• This reply was modified 8 years, 10 months ago by alex404.
• This reply was modified 8 years, 10 months ago by alex404.