Labels and notifications invisible fix

[jonaslundman]

The label should appear above the hidden control, not inside. I manage to fix this inside the javascript file, but there should be a better fix or?

/**
 * Initialization trigger.
 */
jQuery( document ).ready( function( $ ) {

	// Loop over each control and transform it into our color picker.
	$( '.alpha-color-control' ).each( function() {
		
		// Move title & notification into visible position
		var $parent = $(this).closest('li.customize-control-alpha-color');
		$parent.find('div.customize-control-notifications-container').prependTo($parent);
		$parent.find('span.customize-control-title').prependTo($parent);

		// Scope the vars....

[willgorham]

You can also add $parent.find('span.customize-control-description').prependTo($parent); above the last line of code (not the comment) if you're using a control description label.

[terrylinooo]

This plugin has been developed three years ago, probably it happens on new versions of WordPress. But your code fix it in WordPress 5, Thanks.

[TimVevida]

No need for JavaScript here, just move the echo of the label and description in alpha-color-picker.php:

// Begin the output.
if ( isset( $this->label ) && '' !== $this->label ) {
	echo '<span class="customize-control-title">' . sanitize_text_field( $this->label ) . '</span>';
}
if ( isset( $this->description ) && '' !== $this->description ) {
	echo '<span class="description customize-control-description">' . sanitize_text_field( $this->description ) . '</span>';
}
?>
<label>
	<input class="alpha-color-control" type="text" data-show-opacity="<?php echo $show_opacity; ?>" data-palette="<?php echo esc_attr( $palette ); ?>" data-default-color="<?php echo esc_attr( $this->settings['default']->default ); ?>" <?php $this->link(); ?>  />
</label>