Hello I'm developing an Elementor plugin that I have a transform setting in my widget like this :
$repeater->add_responsive_control(
'rp_translatex_header' ,
[
'label' => esc_html('Header Translate X ') ,
'type' => \Elementor\Controls_Manager::NUMBER ,
'devices' => [ 'desktop', 'tablet', 'mobile' ],
'min' => -100,
'max' => 100,
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} hth' => 'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)',
]
]
);
in selectors I use another control value for translateY , this work well until the responsive mode ! on mobile or tablet the translateY value that come from another control doesn't work and return the desktop value (form target control) for fixing this I should use rp_translatey_header_mobile.VALUE for getting mobile mode value ! but this is not my ideal way to fix this and I'm sure that is a way for doing this I want something like :
'selectors' => [
// for normal mode (desktop)
'{{WRAPPER}} {{CURRENT_ITEM}} div' =>
'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)',
// for mobile mode
'{{WRAPPER}} {{CURRENT_ITEM}} div' =>
'transform:translate({{VALUE}}vw,{{rp_translatey_header_mobile.VALUE}}vh)',
]
I can get value by {{your_control_id.VALUE}} very well by I have problem in responsive mode , {{your_control_id.VALUE}} just return the value on desktop and in mobile mode it will return desktop value again ! what should I do ? with using your_control_id_mobile the proplem will solve but i want to use all mode value ! how can i tell to control and selector in which screen use desktop and mobile
I find the solution! I added two more selectors and just before the {{WRAPPER}} I added (mobile ) / (tablet) /(desktop ) like this :
'selectors' => [
'(desktop){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text.VALUE}}vw,{{VALUE}}vh)',
'(tablet){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_tablet.VALUE}}vw,{{VALUE}}vh)',
'(mobile){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_mobile.VALUE}}vw,{{VALUE}}vh)',
],
and for each responsive mode, I got the responsive id like your_id_mobile.VALUE!