Colorization of entire field background within a row

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • Answered
  • (Edited)
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?
Photo of Sam

Sam

  • 140 Points 100 badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of Dan

Dan

  • 1,400 Points 1k badge 2x thumb
You can do something like this:
"<div style='background-color:#ffff99;padding:10px'>" &
"text / field here"
& "</div>"
Photo of Dan

Dan

  • 1,400 Points 1k badge 2x thumb
I suppose that might not fully address your question, as there's still a little border around it...
Photo of Sam

Sam

  • 140 Points 100 badge 2x thumb
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?
Photo of Kevin O'Boyle

Kevin O'Boyle

  • 602 Points 500 badge 2x thumb
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>"
Photo of Sam

Sam

  • 140 Points 100 badge 2x thumb
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.
Photo of Kevin O'Boyle

Kevin O'Boyle

  • 602 Points 500 badge 2x thumb
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" ;

Photo of Sam

Sam

  • 140 Points 100 badge 2x thumb
Thanks Kevin.. I appreciate the help!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,044 Points 20k badge 2x thumb
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.