Is there any easy way to get a container width (in px) inside an expression?
I was making this component. Is a percentage bar. The behaviour is equal to the progress bar, but there is a "walking" label inside it.
The green bar width is attached to variable (1 -> 100) and puts the percentage style width in HTML.
The problem is that when it recahes certain size, I want that the bar size does not shrinks anymore, so that the label is displayed correctly inside it bounds.
I am using 10% as a threshold, but percentage does not relates to the actual bar size in px in HTML. So with some values above it strange things happen:
My expression to calculate HTML's width is this:
"width:" + If(Percentage > 10, Percentage + "%;", "29px;")
where 10% is the threshold, and 29px is the fixed size I want.
I wish a culd compare the actual HTML size with 29px to set it to the minimum value.
Hi Edgar,
Why not use a width as a calculated percentage and a min-width of 29px? Or am I missing something here about your case ?
Dorine
Dorine Boudry wrote:
That is exactly what I needed. With "min-width: fit-content" and proper paddings to it's content it works even better!
Thanks a lot!
Use css min-width property
Edgar Fabiano de Filho wrote:
If you are applying 10% with to the expression make sure the expression style property should be inline-block then only the % value will work.
The rendering value of an expression in the web page is a span i.e inline element but if you make it inline-block it will work.
Regards,
Pankaj