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.

Solution

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

Solution

Use css min-width property

Edgar Fabiano de Filho wrote:

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.

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


Dorine Boudry wrote:

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


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!