Change default field background color- on form in display record mode

  • 0
  • 1
  • Question
  • Updated 3 months ago
  • Answered
Hi,
In edit mode, the fields have a white background so look good in the browser.
In display mode, the fields have a grey background - not so good for some formula rich text fields, that display info based on choices in my app.

Using this works well, but still leaves a small grey border-
"<div style=\"background-color:white;\">"&

if I could make that border white, then the field looks totally clear, apart from text. Hoping someone can tell me how to make background and the border white/ clear.
Tried this, but it only adds another border:
"<div style=\"background-color:white;border: 20px solid White;\">"&

Many thanks.
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb

Posted 4 months ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,522 Points 20k badge 2x thumb
It is the containing <td> that is setting the background of the cell not the contents of the cell. So there is no formula that will change the background of the containing <td>. You have to use script to change the background using this line of code:
$("table.LabelsLeft td.cell").css({backgroundColor: "white"});
You can try this line of code by pasting it into the console and then implement it using the IOL technique.
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Thanks Dan. 
Seems to be a lot you can do with IOL and BOL so thought I better start with IOL as seems a little safer for a noob. Questions:
1. Any security risk with others being able to run scripts with either of these techniques, and access info they shouldn't?
2. I assume these techniques are fine to use with app tokens.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,522 Points 20k badge 2x thumb
1) Only an admin can setup the IOL technique so it is safe as long as you trust your admin.

2) yes
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Thank you.
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Hi, I tried adding this code and I think I have made a mistake.

The background is still grey. The iol technique is fantastic & i have used it to improve the framing of the app (https://community.quickbase.com/quickbase/topics/best-way-to-frame-app-and-remove-all-headers)

Added this line to code page from above:
$("table.LabelsLeft td.cell").css({backgroundColor: "white"});


(Edited)
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
"You can try this line of code by pasting it into the console and then implement it using the IOL technique."

Hi Dan,
I have not been able to get this to work. What do you mean by pasting into console as I have just added the line to the codepage that already loads the iol
Thanks


Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Apologies - your code works as stated. However it only works if you have section headings on the forms set as: 'to the left of fields' and not 'above fields'.

This was really frustrating me and took a long time to figure out why it wasn't working as I have almost all forms set to above fields.

Any advice on how to get it working on both types of section headings would be great, but this is still a big improvement from the standard view form with they grey backgrounds so many thanks yet again!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,242 Points 20k badge 2x thumb
Try this for labels above:
$("table.LabelsAbove div.cell").css({backgroundColor: "white"});
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Worked perfectly - thank you