Use CSS-Calc to control dimensions depending on a CMS variable

Design help Custom code
1

Hello Webflow People!

I have a rather simple idea, but i have no idea how execute it properly.

Goal: Calculate a value from a CMS number-value (make a division by a fixed number) and use the result for the width of a DIV.

I have a collection that has a number. I need this number to be divided by 630.
Then i want use the result for the width (as a %) for a div.
I need this calculated for each CMS item in the collection.

PS. i use this to make ‘bars’ that fill up.
I know what the max values are, so i can divide the CMS number by a fixed number).

It could be done with CSS calc() but that isn’t supported (yet).
I have no idea how to do this with or if i need or can use jquery f.e.
Can anybody offer help?

1 Like
2

Webflow supports anything CSS even if it’s not in the UI yet.

INside of a Collection List, OR inside of a template page (in order to have access to the CMS variable), us a Custom Code component inside of the page (NOT in the page settings) and craft you calc rule for the class of the element you’re targetting. Select your variable and click on top right of the custom code box to swap it by your CMS variable.

The effects will be seen live in the designer.

3 Likes
3

Hi Vincent,

That works now - but i can only use px or mm, or em.
I first need to (re)calculate the Webflow CMS number into a new number.
CSS calc is on the wishlist, but isn’t shipped or anything if i’m correct?

4

Wow - i think i have it!
I need to learn how to use the css-calc expression.

1 Like
5

Great. That will be useful for others if you post a screenshot of the custom code dialog box when you finaly make it work. Thanks!

6

I placed the unit-format in the last place, but you need to place it in the first.
This is what works.

So the first part of calc needs to have the unit (px, mm, em, %) otherwise it won’t work.

image
image801×139 6.01 KB

5 Likes
7

Great, thanks a ton for coming back to report. This is exactly what I had described. Kudos for putting that together. Isn’t this great? :slight_smile: CSS Calc is awesome.

3 Likes
8

No problem! This is really awesome and powerfull!
This should be reported in other CSS calc threads as well - i was only reading that this is not implemented and you should go to the wishlist and vote.

1 Like
9

I’m late to the party on this but :heart_eyes:. This is mint