How to have variables in CSS and set them from controller dynamically during runtime in UI5?

0
votes

I want to position an actionsheet(ActionSheet does not accept arguments for positioning while opening as of now) using addStyleClass function. As this function only accepts CSS class name as I read in API and not unnamed classes directly in the argument, I need to have different value of top property in my CSS class (webapp/css/Style.css) which would be like -

.relationActionSheetStyle {

top: iPageY;

}

iPageY is obtained during runtime from a right click event in the controller function.
How can I pass value to iPageY variable in CSS dynamically and then use myActionSheetControl.addStyleClass(relationActionSheetStyle)?

1
javascriptcsssapui5

1 Answers

0
votes

Add below css in you style.css file

:root {
   --myVar: 100px;
}

.relationActionSheetStyle {
   top: --myVar;
}

After adding addStyleClass to action sheet, use the statement below to update the variable

document.documentElement.style.setProperty("--myVar", 300 + "px");

Adjust the variable naming according to your needs.