How do I use a Django variable as the width value in a style tag in HTML?

I'm trying to use a Django variable as the percent width value in a style tag in HTML but it won't work. I've noticed that it won't allow me to use curly braces {} at all in style tags, which doesn't make sense because from what I've seen online it should allow it.

I want it to be like this:

<div class="progress" style="height: 40px;">
    <div class="progress-bar" role="progressbar" style="width:{{ value }}%">{{ value }}%</div>
</div>

for some reason when I do that this I immediately get an error for using curly braces {{}}: Image of my error

The error is: "property value expected css(css-propertyvalueexpected)"

I also tried using this method:

{% with "width: "|add:value|add:"%" as percent_style %}
   <div class="progress-bar" role="progressbar" style=style="{{ percent_style }}">{{ value }}%</div>
{% endwith %}

but it also did not work...

Thanks in advance.

Update: I Disabled html validate styles in the Visual Studio Code settings and now I don't get the error in vs code and it works on the browser as well. I was confused why it didn't work in the browser in the first place though so I enabled html validate styles again and it was still working in the browser despite the vs code error. So I must have had a typo of sorts when I attempted to load it in the browser initially.

your variable match_percentage_card.2 if 2 is a property then you have to use [] to access it like this match_percentage_card[2]

solution : do this: instead of match_percentage_card.2 write  match_percentage_card[2]
Back to Top