How to setup UI material proportions to prevent squeezing?

I created UI material with segmented progress bar based on what find on the internet.
And it works pretty well in preview. (Change count of segments, stroke width… etc.)

But if i try to fill vertical box with that material (as an image) progress bar will be squeezed. I suppose material has some bounds? How i should properly crop to progress bar borders?
(Yes, i try to change image size with no success)

Here how it works inside, i think here i should make some changes, but i don’t know how.

1 Like

Wouldn’t it be a matter of:

Do tell.


It squeeze horizontall

Remove padding? Also ensure to compile.

Yeah, i removed, nothing change

Makes sense. It’s because we need to handle it slightly differently due to the hierarchy (which is more than fine!):

image

  • set the 1st image to Auto
  • set the 2nd image to Fill
  • set text to Fill

You’ll get a number next to Fill. It’s a percentage ratio of how much space this elements takes up. Eyeballing it:

  • set the 2nd image to 0.7
  • set the text to 0.3

You could even to this for all 3 elements. Ideally it should all add to 1 for clarity.

  • 20% for the image
  • 60% for the bar
  • 20% for the text

Adjust as needed, and then add padding.


One more thing - it looks like you copy a lot of elements here:

image

Perhaps this:

image

Should be made into one widget, you could then place multiple times. And if you ever need to adjust it, you only need to do it once, rather then 9 times across 5 menus… Consider it.

I changed percentage ratio of 3 elements like (0.2,0.6,0.2) but still has an issue with vertical squeez of material

Solved. Issue with incorrect proportions in shader. I forget to switch second mask to (G)