data-attribute ignored in css calculation

Question

I am trying to calculate the width of a div dynamically based on a specified data attribute in the html code like below.

<div class="Mlink-group" data-linkGroupWidth="2">
    content
</div>

Via css I want to calculate the width of this element. Basically I multiple a base width (first two variables in the width calc) and multiple that times the number specified in the data-attribute (2 in this case).

:root{
--linkMargin: 1px;
--linkwidth: calc(var(--linkBaseWidth) + (100vw - var(--CatBaroffset) - var(--linkCount) * (var(--linkBaseWidth) + (var(--linkMargin) * 2))) / var(--linkCount));

}
.Mlink-group{ /*MLink-items parent*/
    /* some other css styling here*/
    width: calc(var(--linkwidth) + var(--linkMargin) * attr(data-linkGroupWidth, number));
}

The result of this is a width that is equal to the div's content width while in this example, it should be two times the content width. When I remove the attr(data-linkGroupWidth, number) and replace it with a fixed number like 2, then the code works.

Does somebody see what I am doing wrong?

you cannot do this, attr is only allowed inside content for the moment — Temani Afif, Jan 22 '20 at 19:48
@TemaniAfif I now see. I misinterpreted this fiddle. That was why I thought it was already possible. Thanks for the reply. http://jsfiddle.net/CaioToOn/wp7Wc/4/ — Vinc199789, Jan 22 '20 at 20:33

score 0 · Answer 1 · answered Feb 17 '22 at 22:55

I have an answer on a similar question that will help you solve this.

First off, where you have used attr(data-linkGroupWidth, number) is incorrect. If you are trying to specify that the attribute value should be a number then you would need to remove the comma. The value after the comma is the fallback value if the attribute value is invalid. Per the spec:

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

However, even removing the comma won't fix your problem as data attributes aren't currently supported for this use. To achieve what you are desiring to accomplish we need to use custom properties instead of data attributes. Therefore,

<div class="Mlink-group" data-linkGroupWidth="2">
    content
</div>

needs to be changed to

<div class="Mlink-group" style="--data-linkGroupWidth:2;">
  content
</div>

and

:root{
--linkMargin: 1px;
--linkwidth: calc(var(--linkBaseWidth) + (100vw - var(--CatBaroffset) - var(--linkCount) * (var(--linkBaseWidth) + (var(--linkMargin) * 2))) / var(--linkCount));

}
.Mlink-group{ /*MLink-items parent*/
    /* some other css styling here*/
    width: calc(var(--linkwidth) + var(--linkMargin) * attr(data-linkGroupWidth, number));
}

becomes

:root{
  --linkMargin: 1px;
  --linkBaseWidth: < Needs to be declared first before --linkWidth can use its value as css is cascading and can't reference something that is further down in the file
  --catBarOffset: < Also needs to be declared first
  --linkCount: < Also needs to be declared first
  --linkWidth: calc(var(--linkBaseWidth) + (100vw - var(--catBarOffset) - var(--linkCount) * (var(--linkBaseWidth) + (var(--linkMargin) * 2))) / var(--linkCount));    
}
.Mlink-group {
  width: calc((var(--linkWidth) + var(--linkMargin)) * var(--data-linkGroupWidth));
}

I modified the width calculation in your Mlink-group css as I think that is what you are trying to calculate. When using css calc(), always remember PEMDAS--the order of operations for math calculations. Parenthesis first, then exponents, then multiplication and division, and finally addition and subtraction. You should also try to be consistent in your case and naming structure for classes and variables so that you don't run into errors down the road.

This will get you the result you are looking for, assuming that all of your variables and calculations are correct.

data-attribute ignored in css calculation

1 Answers1