Progress Bar - how to center Text at all times regardless of percentage

[craig77]

Hi,

Just started using progressbarwidget, I want the text from my textTpl to be center aligned within the progress bar at all times regardless of what percentage the bar is at, when I mean centered I mean the center of the progress bar and not center of the progress value. See fiddle below and attached imageprogressBar.png

https://fiddle.sencha.com/#fiddle/1dm7

I seen a reference on another thread to set position : relative, this does set the text to the center of the bar but doing so means the bar does not show the progress anymore. I see when the progress bar is created it has 2 divs, containing the following classes, x-progress-text and x-progress-bar, both contain the text value.

Thanks in advance

[Gary Schlosberg]

Here's an older thread that might help:
https://www.sencha.com/forum/showthread.php?282135

[craig77]

Hi,

Thanks for the reply. I did see that thread already and tried it out, it doesn't do what I want, it centers the text only in the progress bar and not the full bar, ie if percentage was at 50% it would center it inside the 50% bar, I want to text to always be in the center of the full bar regardless of what the percentage is.

I am upgrading an application from Ext JS 2.3 and it was using an Ext.ProgressBar and it was always showing the text in the middle of the full bar that's why I find it strange I cannot replicate this in Ext JS 5.1.3

[chanand]

See my answer on SO: http://stackoverflow.com/a/38391684/139300

(Working example: https://fiddle.sencha.com/#fiddle/1dn4)

[craig77]

chanand's answer resolved my issue. I had to make one change to his answer, added the style properties to the backgroundEl as well so that both text values for bar and background were in the same place