Support » Plugin: Material Design for WordPress » Floating labels not working

Floating labels not working

  • Resolved anoktear

    (@anoktear)


    1 month, 2 weeks ago

    The floating labels are not being triggered. It’s working on the backoffice if I press to see Material Blocks.

    <form class="mdc-form-field contactForm" method="POST" action="https://script.google.com/macros/s/testing">
	<div class="mdc-form-field form-elements">
	<label class="mdc-text-field mdc-text-field--outlined">
	<span class="mdc-notched-outline">
	<span class="mdc-notched-outline__leading"></span>
	<span class="mdc-notched-outline__notch">
	<span class="mdc-floating-label" id="full-name">Full Name</span>
	</span>
	<span class="mdc-notched-outline__trailing"></span>
	</span>
	<input type="text" class="mdc-text-field__input" aria-labelledby="full-name" required>
	</label>
	</div>
</form>

    I’m testing locally with a child theme of GeneratePress on WordPress 5.8.

    It’s working if I activate the included Material Design Theme. However, I want to use the functionality without the Material theme.

    GeneratePress is one of the most popular themes. What do I need to do?

    • This topic was modified 1 month, 2 weeks ago by anoktear. Reason: format
    • This topic was modified 1 month, 2 weeks ago by anoktear. Reason: format
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter anoktear

    (@anoktear)

    1 month, 2 weeks ago

    I checked what the Material theme was doing and copied the Material theme front-end.js into the GeneratePress child theme, enqueued the script on functions.php and it works.

    Questions: Is the JS file provided by the Material plugin not enough without using the Material theme? Or was it because I have the form in a plugin? Food for thought.

    Paul Bearne

    (@pbearne)

    1 month, 1 week ago

    Hi @anoktear

    I have just been looking at this and the plugin should have added the front-end.js to the footer in your theme

    can you check you are running wp_footer in your child theme?

    maybe try loading the parent theme on it own

    Paul

    Thread Starter anoktear

    (@anoktear)

    1 month, 1 week ago

    Hello @pbearne

    It’s a strange behaviour, front-end.js is added to the footer of the child theme using the plugin. However, floating labels won’t work.

    If I turn off the plugin and enqueue front-end.js and the quickstart CDN in functions.php of the child theme, then it works fine.

    functionmaterial_enqueue_style() {

wp_enqueue_style( 'material-style', 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css');

wp_enqueue_script( 'material-script', 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js', array(), null, true);

wp_enqueue_script( 'material-front-end', get_stylesheet_directory_uri().'/assets/js/front-end.js', array(), null, true);

}

add_action( 'wp_enqueue_scripts', 'material_enqueue_style' )

    Conclusion, floating labels won’t work just by turning on the material plugin. I have this same behaviour in all default WordPress themes. Attention that my form is inside a custom plugin, is this relevant?

    Thread Starter anoktear

    (@anoktear)

    1 month, 1 week ago

    Update: Some more tests by using the Material plugin. I added a material form to a page, it works. However, when adding the form to Widgets, it won’t apply the floating labels. So the problem is front-end.js not being applied inside widgets?

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Topic Tags

Views