Forum Discussion

JenniferSilbers's avatar
JenniferSilbers
Qrew Trainee
3 years ago

Color part of the background in a field

Hello,

I have a filed that I need to color part of the text and not another, example -   30%/30%

I have gotten close, however there is an invisible line break with the color formula I can't figure out.  Here is my formula:

var text targetl=Left([Target], "/");
var text targetr=Right([Target], "/");
var text targetlc="<div style=\"background-color:yellow;\">"& $targetl &"</div>";

$targetlc & "/" & $targetr

The formula leaves me with the below text and I am trying to get them to be on the same line. I have tried a few different variations but still I end of up with two separate lines. 
30%                 
/30%

Any help is appreciated.

Thank you

------------------------------
Jennifer Silberstein
------------------------------
Formulas and functions

2 Replies

Sort By
  • JeremyAnson's avatar
    JeremyAnson
    Qrew Cadet
    3 years ago
    I'd suggest putting both parts of the output in <div> tags and using display:inline-block to get them to display on the same line. Something like:

    var text targetl=Left([Target], "/");
    var text targetr=Right([Target], "/");
    var text targetldiv="<div style=\"background-color:yellow;display:inline-block;\">"& $targetl &"</div>";
    var text targetrdiv="<div style=\"display:inline-block;\">/"& $targetr &"</div>";
    $targetldiv & $targetrdiv

    ------------------------------
    Jeremy Anson
    ------------------------------
    • JenniferSilbers's avatar
      JenniferSilbers
      Qrew Trainee
      3 years ago
      Hello Jeremy,

      Thank you that worked perfectly.  I have never seen the inline-block so I will have to remember that for next time. 

      Jen

      ------------------------------
      Jennifer Silberstein
      ------------------------------