When changing styles of elements with JavaScript, Bubble overwrites them

I’m using JavaScript to set the width and height of an image (since there’s no way in Bubble to dynamically set width and height) but the problem that I’m having is that as soon as I set the CSS properties, Bubble comes in and overwrites it.

I’ve tried it on the image as well as on container groups. I’ve had some success adding a delay before setting the styles, but then if Bubble makes any sort of change at all (e.g. on mouse hover) it overwrites the styles again.

Is there any way to modify the styles of Bubble elements without Bubble taking over? Or is there a way to use Bubble (instead of JavaScript) to dynamically set CSS properties like width and height?

Hey Brenton,

The trick here is to add !important at the end of each CSS statement.

So it would look something like

#myID {
height : 400px !important;
width: 600px !important;
}

Cheers,

Ranjit
Atomic Fusion | Build faster on Bubble with the community’s Assets

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.