plugins – Shade Picker UI in admin just isn’t appropriate

I must have coloration picker settings filed in my plugin. I’ve registered a area and its saving worth within the database appropriately. However, within the admin space the picker person interface just isn’t appropriate I feel.

It ought to appear to be this:

however in my case, it seems to be like

Right here is the code I’ve for registering the sector

        add_settings_field( 'iconBg', 'Background Shade', array( $this, 'bg_settings_field' ), 'wpfyscroller-settings-page', 'wpfyscrollersection' );
        register_setting( 'wpfyscrollerfields', 'iconBg', array('sanitize_callback'=>'sanitize_hex_color', 'default'=> '#000000') );

        //Callback operate
        operate bg_settings_field() { ?>
 
        
        <enter sort="textual content" title="iconBg" worth="<?php echo get_option('iconBg') ?>" class="cpa-color-picker" >
         
    <?php }

Right here is the code for enqueueing js

    add_action('admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
    operate enqueue_admin_js() { 
 
        // Ensure so as to add the wp-color-picker dependecy to js file
        wp_enqueue_script( 'cpa_custom_js', plugins_url( '/belongings/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), '', true  );
    }

NOTE: My ‘jquery’ dependency already loaded with one other script.

Right here is the JS code:

(operate ($) {$(operate () {

// Add Shade Picker to all inputs which have 'color-field' class
$(".cpa-color-picker").wpColorPicker();});})(jQuery);

Undecided what mistake I did, any assist can be apricated.

Thanks