Background Gradient not working inside Repeater Control
anandau opened this issue · comments
Hi
I am working on a custom module where I have used Background control inside Repeater items.
Here is the code that I have used to add it.
$repeater->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'background_color_indv', 'types' => [ 'classic', 'gradient'], 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .item__content-wrap' ] );
Background color and images are working fine with this. But Background Gradient is not getting applied.
When I further investigated it by looking at the generated css file, I found that it is creating a malformed CSS.
Here is the css code generated by it.
.elementor-1447 .elementor-element.elementor-element-173c65d .elementor-repeater-item-21e3af7 .item__content-wrap { background-color: transparent; background-image: linear-gradient(180deg, , ); }
Another example using radia gradient
.elementor-1447 .elementor-element.elementor-element-173c65d .elementor-repeater-item-21e3af7 .item__content-wrap { background-color: transparent; background-image:radial-gradient(at center center, , ); }
It look like Background Gradient is not compatible with Repeater Controls.
Hi @anandau,
This is indeed a bug. A fix for it will be released in one of the upcoming versions of Elementor.
Thanks for reporting.
I'm having the same issue let know how to fix the above issue.
`
$repeater = new Repeater();
$repeater->start_controls_tabs( 'button_repeater' );
$repeater->start_controls_tab(
'button_design',
[
'label' => __( 'Design', AELA_TEXT_DOMAIN ),
]
);
$repeater->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'background_color',
'types' => [ 'classic', 'gradient' ],
'condition' => [
'button_custom_style!' => '',
],
'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .at-button__content_wrapper',
]
);
$repeater->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'button_background_hover_color',
'types' => [ 'classic', 'gradient' ],
'condition' => [
'button_custom_style!' => '',
],
'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .at-button-wrapper:hover .at-button',
]
);
Below out showing in console CSS is this
#elementor .elementor-element-44abc8b .elementor-repeater-item-1dc9105 .at-button__content_wrapper {
background-color: transparent;
background-image: linear-gradient(180deg, , );
}
`
I am facing the same issue even in latest version(2.5.5).
background-color: transparent;
background-image: linear-gradient(180deg, , )
Still same 5 months later
Please fixed this issue as soon as possible !
Please, please solve this ...
Please solve this issue. I am facing the same issue. It is giving below result in gradient repeator
background-color: transparent;
background-image: linear-gradient(180deg, , )
Hello elementor team,
I have faced the same problem.
#elementor .elementor-element-d12700f .elementor-repeater-item-3a86ea8 .button {
background-color: transparent;
background-image: linear-gradient(90deg, , );
}
It's not working in Elementor Editor but Frontend.
Please fix it asap.
Thank team.