Forum Discussion

JamesBurnett's avatar
JamesBurnett
Qrew Cadet
6 years ago

Text centered in progress bar

I have a Formula Rich text field set up that works as a progress bar - here is the formula:

var text redbox = "https://lamresearch.quickbase.com/up/bpcve39mm/g/rd/eg/va/red.png";  // red 
var text yellowbox = "https://lamresearch.quickbase.com/up/bpcve39mm/g/re/eg/va/orange.png"; // yellow
var text greenbox = "https://lamresearch.quickbase.com/up/bpcve39mm/g/rf/eg/va/green.png"; // green
var text graybox = "https://lamresearch.quickbase.com/up/bpcve39mm/g/rg/eg/va/grey.png"; // gray

var text box = If([Feeder Line %]<0.4,$redbox, If([Feeder Line %]<0.7,$yellowbox,$greenbox));
var text widthval ="\"" &Min(Max([Feeder Line %]*100,0),100)&"\"";
var text widthvalbalance ="\"" &ToText(Max(0,Min(100,100-([Feeder Line %]*100))))&"\"";
"<img height = 18 width="&$widthval & "src=\""&$box&"\"/>" &"<img height = 18 width="&$widthvalbalance&"src=\""&$graybox&"\"/>"


I want to display the % (Feeder Line %]*100) centered in this progress bar, where/how would I go about doing this?
Formulas and functions

4 Replies

Sort By
    • JamesBurnett's avatar
      JamesBurnett
      Qrew Cadet
      6 years ago
      Sorry, I should have specified - I tried this, but it splits up the two bars and puts the text in a white space between them. I want the text overlaid over the two bars, with no space in-between. Maybe I just put it in the wrong spot? Here is the formula I tried: 

      "<span style:align center><img height = 18 width="&$widthval & "src=\""&$box&"\"/>"
      &
      [Feeder Line %]*100
      &
      "<img height = 18 width="&$widthvalbalance&"src=\""&$graybox&"\"/></span>"
    • AustinK's avatar
      AustinK
      Qrew Commander
      6 years ago
      I cannot find the list of limited html you can use in rich text but I believe tr and td are available. You might be able to do it via that.
    • DanieGrabe's avatar
      DanieGrabe
      Qrew Trainee
      6 years ago
      Hi James, I have used negative margins to solve this in the past. You can move the second element over the first element by giving it a negative margin-top value. Same applies for left and right margins if you want to overlap in the same line.