Results 1 to 5 of 5

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

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    23

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

    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


  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

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

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    23

    Default

    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

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    40
    Answers
    2

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    23

    Default

    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

Similar Threads

  1. Donut chart with percentage in the center
    By henryfx in forum Ext: Discussion
    Replies: 4
    Last Post: 3 Aug 2013, 3:55 PM
  2. Replies: 3
    Last Post: 11 Feb 2013, 1:05 PM
  3. Vertical Progress Bar for Fuel percentage
    By rafaelrp in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 13 Feb 2012, 5:28 AM
  4. Progress bar text is white for low progress
    By WesleyMoy in forum Ext GWT: Discussion
    Replies: 8
    Last Post: 5 Aug 2011, 12:47 AM
  5. borderlayout percentage width and center region
    By stevevai in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Feb 2011, 1:39 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •