Background Gradient not working inside Repeater Control

[anandau]

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.

[kobizz]

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.

[anandau]

hi @kobizz @KingYes
I have just checked with the latest version and this issue is still not resolved.

[mawk-khan]

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, , );
}
`

[mawk-khan]

Hi @kobizz @KingYes

Can you look into my issue, please?

[khalidjubair]

I am facing the same issue even in latest version(2.5.5).

background-color: transparent;
background-image: linear-gradient(180deg, , )

[danyj]

Still same 5 months later

[fred-xs]

Please fixed this issue as soon as possible !

[Micemade]

Please, please solve this ...

[mswebworld]

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, , )

[steve231293]

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.