Responsive color control styling issue still exists in latest Elementor version

[Patrick Villanueva]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

As the title explains, here is the screenshot:

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

Environment

https://pastebin.com/APefwWuN

[Raz Ohad]

@pkvillanueva

Which widget is it? where can I see it?

[Patrick Villanueva]

@bainternet

The screenshot given is from my personal custom widget that I was working on. Unfortunately, there's no similar widget case in Elementor and Elementor Pro that I could share to you. You can simply replicate this issue by adding this code to any widget.

$this->add_responsive_control(
	'responsive_color',
	[
		'label' => __( 'Color', 'elementor' ),
		'type' => 'color',
	]
);

[Raz Ohad]

@pkvillanueva

What you can do is add 'label_block' => true to your control:

$this->add_responsive_control(
	'responsive_color',
	[
		'label' => __( 'Color', 'elementor' ),
		'type' => 'color',
		'label_block' => true,
	]
);

And then with a little CSS:

.elementor-control-responsive_color .elementor-control-input-wrapper {
    width: 100% !important;
}

You should get something like this: