Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive color control styling issue still exists in latest Elementor version #6227

Closed
4 of 5 tasks
pkvillanueva opened this issue Nov 20, 2018 · 3 comments
Closed
4 of 5 tasks

Comments

@pkvillanueva
Copy link

@pkvillanueva pkvillanueva commented Nov 20, 2018

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:

2018-11-20 18 25 09

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

@bainternet
Copy link
Collaborator

@bainternet bainternet commented Nov 27, 2018

@pkvillanueva

Which widget is it? where can I see it?

@pkvillanueva
Copy link
Author

@pkvillanueva pkvillanueva commented Nov 29, 2018

@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',
	]
);

@bainternet
Copy link
Collaborator

@bainternet bainternet commented Dec 17, 2018

@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:
t0hp5p1

@bainternet bainternet closed this Dec 17, 2018
joshmarom added a commit to joshmarom/elementor that referenced this issue Dec 17, 2018
KingYes added a commit that referenced this issue Dec 17, 2018
Controls responsive switcher position (#6227)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants