Forum Discussion

SamCole's avatar
SamCole
Qrew Cadet
8 years ago

Colorization of entire field background within a row

My question is more of UX/design, regarding using the tags to color the background of a specified field. I understand the process. However, is there any code or tag that can be placed within the div tag that will color the entire background of the field, not just around the text. As it does with default tags, it seems to leave a buffer/margin that remains the row color.
Is there a ?margin? or ?padding? attribute amount that can be adjusted to fill the entire background of the field?
  • You can do something like this:
    "<div style='background-color:#ffff99;padding:10px'>" &  "text / field here"  & "</div>"
    • DanLadner1's avatar
      DanLadner1
      Qrew Trainee
      I suppose that might not fully address your question, as there's still a little border around it...
  • Thank you for the response.. Yeah, that's what i keep seeing when i try that too. It pads the text, etc, but can't figure out how to extend the background color to the edges of the field ion the reports. Maybe a customizable setting for the report itself that can be achieved with code of some sort?
  • I had a smart friend named Avi who gave me this code.  It might be what you're looking for.

    //Color Palette
    var text grey = "#5D6D7E";      
    var text red = "#CB4335";   
    var text green = "#27AE60";         
    var text orange = "#F39C12";        
    var text blue = "#1F618D";        
    var text black = "#000000";  
    var text txtcolor = "#ffffff";

    var text bgcolor = Case(true,
    ToDate([Date Created]) = Today(),$blue,
    ToDays(Today() - ToDate([Date Created]))<5, $green,
    ToDays(Today() - ToDate([Date Created]))<7, $grey,
    $orange
    );


    var text styleTextPartA = "style=\"text-decoration: none; text-align: center;  background:" ; 
    var text styleTextPartB = "; white-space: nowrap; border-radius: 3px; padding-left: 4px; padding-right: 4px; padding-top: 3px; padding-bottom: 3px; color: white; font: normal 700 24px/1 \"Calibri\", sans-serif; display: inline-block; text-shadow: none" ;

    var text style = $styleTextPartA & $bgcolor & $styleTextPartB ;   
    //Use the commented code below if you want the colorization only to be for the text and not the entire table cell
    //"<a " & $style & ">" &ToText(ToDate([Date Created])) &"</a>"

    "<div "& $style &">" & ToText(ToDate([Date Created])) & "</div>
  • Kevin, thank you so much. I appreciate the method. Its a great piece of code, but still doesn't quite get me what I'm looking for. It pads color around the text, but the issue is still that the color doesn't reach the edges of the field's 'cell' in the report.

    I've included screenshots. The first is the result of your code, and the second is a photoshopped rendering of the background fill i'm looking for, for the background color to take up the entire space of that field, so that the row color doesn't show through.
  • try this for style text part B.  if you play with the padding sizes you can get very close to what you want

    var text styleTextPartB = "; white-space: nowrap; border-radius: 0px; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; color: white; font: normal 700 24px/1 \"Calibri\", sans-serif; display: inline-block; text-shadow: none" ;

  • This is a simple result of the CSS Box Model. With a formula you can control the styling of the content of the cell (ie <td>content</td>) but you can't control the styling of the cell itself.  (ie <td style='...'>)

    To gain control of the styling of the cell you have to use script. It is an easy fix with script but you probably have to have some logic or convention as to which cells need the special styling as you probably don't want to apply it to every cell in the report.