Error on input with Material Design

  • Resolved anoktear

    (@anoktear)


    3 years, 4 months ago

    I need to implement Material Design for a plugin with a simple HTML form that I have created. On functions.php of the GeneratePress child theme I have enqueue the necessary files:

    function material_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', '', null, true); 
}
add_action( 'wp_enqueue_scripts', 'material_enqueue_style' );

function footer_add_material_icons() {
    wp_enqueue_style('material-icons', 'https://fonts.googleapis.com/icon?family=Material+Icons');
};
add_action( 'get_footer', 'footer_add_material_icons' );

    However, I think that I also need to instantiate the JavaScript, the docs mention:

    import {MDCTextField} from '@material/textfield';

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

    How do I implement this?

    Also, I tried using the official Material Design for WordPress plugin, but the result is the same.

    No JS errors and the field is selected and styled. However, it won’t apply the required style and the floating label, so when I input, this is what happens:

    See https://i.imgur.com/U49rSdK.png

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • Leo

    (@leohsiang)

    Hi there,

    I don’t believe this is a theme issue at all.

    Have you checked with the plugin’s support team?

    Let me know ??

    Thread Starter anoktear

    (@anoktear)

    HI @leohsiang.

    I also tested by using the Material Design theme included in the plugin and it works. However, I’m using GeneratePress and it doesn’t, isn’t this a theme issue?

    Yes, I tried asking on their support, but no answer.

    Without using the plugin and just linking the CDN quick start on the functions.php I have the same result. Can you help me instantiate the JavaScript on the child theme?

    Leo

    (@leohsiang)

    The Material Design theme included is likely not a good theme to test as it’s specific to them.

    Can you try a Twenty series standard WP theme to test?

    JavaScript can typically be added using the wp_footer hook which is a WordPress hook:
    https://docs.generatepress.com/article/using-hooks/
    https://docs.generatepress.com/article/wp_footer/

    Thread Starter anoktear

    (@anoktear)

    Well @leohsiang the Twenty series were giving the same problem.

    However, I checked what the Material theme was doing and copied the Material theme front-end.js into the GeneratePress child theme, enqueued the script and it works.
    I guess this front-end.js is more complete than the one provided.

    Leo

    (@leohsiang)

    Glad to hear.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Error on input with Material Design’ is closed to new replies.

Tags