Pinasbet login register download.Makakuha ng libreng 700pho sa bawat deposito

Resolved alex404
(@alex404)

7 years, 3 months ago
I am trying to make a contact page for my WordPress site, and have almost completed the form, but I don’t know for some reason the labels and the entered values are getting overlapped with each other when I reload the page after filling the input fields.

This is what I am getting:
https://i.stack.imgur.com/W9gry.jpg

This is what I expect
https://i.stack.imgur.com/26rxe.jpg

I am using “Contact Form 7” plugin in WordPress (along with Hestia theme), and another extension of this plugin called “Material Design for Contact Form 7”, Now, the problem is that I don’t know whether this plugin uses Materialize CSS or some other CSS.

Tried alot, but I am unable to figure out the cause of this issue, Is there any solution to this ?

If there’s any, please mention and tell which FILE to edit ? If I need to edit any PHP/CSS/JS file, where can I find it?
```
[md-form]

[md-text label="House no."]
[text* house-name]
[/md-text]

[md-text label="Street no."]
[text* street-name]
[/md-text]

[md-text label="Post Ofiice"]
[text* po-name]
[/md-text]

[/md-form]
```
I have already raised a question here
https://stackoverflow.com/questions/45625870/contact-form-7-error-labels-and-entered-values-overlaps-in-the-form-field-what
But NO help so far

Some other Plugins I am using are:
1) Contact Form 7 Database Addon – CFDB7
2) jQuery Validation For Contact Form 7
3) Contact Form 7 Conditional Fields
4) Contact Form 7 Multi-Step Forms
5) Simple Custom CSS
- This topic was modified 7 years, 3 months ago by alex404.

Viewing 13 replies - 1 through 13 (of 13 total)

Plugin Author GusRuss89
(@gusruss89)

7 years, 3 months ago

Hi @alex404,

It looks like your theme probably has some CSS overriding parts of the plugin CSS.

Do you have a live link I can view this on to help debug?

Thanks,
Angus
Thread Starter alex404
(@alex404)

7 years, 3 months ago
Hello Sir @gusruss89,
here it is
https://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 7 years, 3 months ago by alex404.
- This reply was modified 7 years, 3 months ago by alex404.
- This reply was modified 7 years, 3 months ago by alex404.
- This reply was modified 7 years, 3 months ago by alex404.
- This reply was modified 7 years, 3 months ago by alex404.
- This reply was modified 7 years, 3 months ago by alex404.
Thread Starter alex404
(@alex404)

7 years, 3 months ago

I dont know why my replies are not getting posted

Moderator Jan Dembowski
(@jdembowski)

Forum Moderator and Brute Squad

7 years, 3 months ago

Because you keep editing AND re-posting. It triggered the pending queue. I’ve cleared it out.

Thread Starter alex404
(@alex404)

7 years, 3 months ago

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
https://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

Thread Starter alex404
(@alex404)

7 years, 3 months ago

@gusruss89
“On Page Reload – If Input Field is Already Filled, Then Float labels UP”

How can I do this Programmatically by editing some jQuery/JS or CSS or PHP file ?
Please help ??
Thread Starter alex404
(@alex404)

7 years, 3 months ago
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…
Thread Starter alex404
(@alex404)

7 years, 3 months ago

here is my site’s link
https://jioselect.com/step1/
Just fill the form, click Next, Get Back to Step 1 & Reload
You’ll see contents overlapping
Thread Starter alex404
(@alex404)

7 years, 3 months ago
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
Thread Starter alex404
(@alex404)

7 years, 3 months ago

Hello Sir @gusruss89
I think this is exactly my problem:
https://github.com/material-components/material-components-web/issues/300

And I think this could be the solution:
https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield#pre-filled-text-fields
Thread Starter alex404
(@alex404)

7 years, 3 months ago
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);
			}
		});
```
Plugin Author GusRuss89
(@gusruss89)

7 years, 3 months ago

Hi @alex404,

Nice work on your solution. I will look at integrating this into the next release, though I think the only case where it will be an issue is when a multi-step form plugin is in use.

Thanks,
Angus

Plugin Author GusRuss89
(@gusruss89)

7 years, 3 months ago

Hi @alex404,

FYI, I’ve released an update to the plugin which includes a fix to this issue.

Thanks,
Angus

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Labels and entered values overlaps in the form field – Contact Form 7 ERROR’ is closed to new replies.

Tags