Discussions

Expand all | Collapse all

Colorization of entire field background within a row

  • 1.  Colorization of entire field background within a row

     
    Posted 01-31-2018 19:01
    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?


  • 2.  RE: Colorization of entire field background within a row

    Posted 01-31-2018 20:29
    You can do something like this:
    "<div style='background-color:#ffff99;padding:10px'>" &  "text / field here"  & "</div>"


  • 3.  RE: Colorization of entire field background within a row

    Posted 01-31-2018 20:31
    I suppose that might not fully address your question, as there's still a little border around it...


  • 4.  RE: Colorization of entire field background within a row

     
    Posted 01-31-2018 20:59
    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?


  • 5.  RE: Colorization of entire field background within a row

    Posted 02-01-2018 02:07
    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>


  • 6.  RE: Colorization of entire field background within a row

     
    Posted 02-01-2018 04:01
    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.


  • 7.  RE: Colorization of entire field background within a row

    Posted 02-01-2018 04:42
    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" ;



  • 8.  RE: Colorization of entire field background within a row

     
    Posted 02-01-2018 04:44
    Thanks Kevin.. I appreciate the help!


  • 9.  RE: Colorization of entire field background within a row

    Top
    Contributor
    Posted 02-01-2018 11:52
    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.