Progress Circle Resizing
Question

Is it possible to resize the progress circle widget to a height lower than 150px? Im trying to make the progress circle in line with text (so of same size), but I cannot seem to resize it in anyway. If I enclose it within a container and shrink the container, the progress circle will simply overflow beyond it. Does anyone have any ideas? 


Thanks!

Hi Jonathan,

I was able to resize it by keeping it within a container and changing the width of that container. Can you send a screen shot of your screen.

Shashank...

Shashank Diwan wrote:

Hi Jonathan,

I was able to resize it by keeping it within a container and changing the width of that container. Can you send a screen shot of your screen.

Shashank...


Hi Shashank


Thanks for the reply haha I think I wasn't thinking straight and only tried adjusting the size of the container by editing the height in pixels rather than adjusting the width . Thanks for helping haha


Jonathan

Awesome, happy to know it worked for you :)


Cheers

Shashank...

Hi Shashank,

Can you suggest how can I reduce the size of Text that appear inside the Progress cycle. Thanks in Advance 

The progress circle has a CSS class of 'progressbar-text' applied to it. You could target that directly in CSS.

I use the ExtendedClass field of the widget to add my own CSS rule and then target the text with that. IN the following example I add progress-circle-smaller to the ExtenedClass field and then the following rule to the style sheet

.progress-circle-smaller .progress-circle .progressbar-text {
font-size: var(--font-size-s);
}

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.