Progress bar not filling entire div

Question

I have a div at the top of the page that shows a global progress bar. The div is taking up 100% of the page and a specified height (green). I want the progress bar to take up the entire region, but it appears it has some sort of non-adjustable margin and/or padding. I've messed with the width/height/progressthickness, etc to no avail.

Durga Gopalakrishnan · Answer

Hi Jeff,Greetings from Syncfusion.We suggest you to increase the ProgressThickness and TrackThickness to increase the height of progress bar. By default width will be inherited to its parent element width. We have prepared sample based on your requirement. @using Syncfusion.Blazor.ProgressBar

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ProgessHeight761841981.zipKindly revert us if you have any concerns.Regards,Durga G.

Jeff Voigt · Answer

Thank you for the update. While the height adjustments you suggested do help, it is still impossible to fill the entire green area. If you just have a div with no margin and/or padding and you place the progress bar within it, how is one supposed to fill up the entire width? The parent div is set to 100% so I can't set the progress bar width to 110%...

I'm wondering why the control seems to have a built-in margin and/or padding without any css telling it so.

Durga Gopalakrishnan · Answer

Hi Jeff, We request you to specify Margin Left and Right value as 0 to display progress bar in parent element width. We have attached modified sample for your reference. Please check with below snippet and sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ProgressMargin-1781029522.zip Please let us know if you have any concerns. Regards, Durga G