How to avoid native HTML resize behaviour overwriting my style variables?
MVvdV
1 month ago
Im using style variables to keep track of and set the dimensions of a div. However, the browser native css resize that i use writes it's own width and height style properties that override my own. how can i avoid this?
Lucas G
1 month ago
A browser does not do that on its own
Those seem like inline styles
MVvdV
1 month ago
they are not present before the 'resize' occurs and i do not have a function that attaches these styles to the element, so if the native resize behaviour does not do this where does it come from.
MVvdV
1 month ago
the style variables are set inside the component, and the 'resize' occurs on the component instance, is that the issue? is it applying the styles to the instance after resize? how do i avoid that?
It doesn't seem like those styles are being properly set
--height is a variable, not a property
--height: fit-content isn't actually setting the height property
The height property is hard-coded to 346px in that screenshot but it isn't actually being set by the variable
It would read height: var(--height) otherwise
Make sure you are correctly setting the height property with the variable
MVvdV
1 month ago
Its a style variable set in the component which is tied to the height property. It works fine when I set a value to it.
It also work properly before I use resize
Lucas G
1 month ago
Sorry I just checked the link you sent
All the values seem to be updating correctly
And the windows properly resize
Lucas G
1 month ago
What is the issue exactly?
I see the variables updating then when dragging stops width/height are updated
It's a cool demo btw
🙌1
MVvdV
1 month ago
So the issue is the css resize adds the overwrite values for width and height so after resize I have no control over them. Especially if I minimise a window
@Lucas G
.jpeg/public)