add background color for checkbox field

  • 1
  • 1
  • Question
  • Updated 2 weeks ago
  • In Progress
  • (Edited)
I want to add the background color for the checkbox field. I have 3 checkboxes under section "Customer instruction" and want all of them have the yellow background as the text above.  Please see below for what I mean.

Please help and show me how to format the background of the checkbox. It would be nice if someone knows how to format the background color for the entire section.

Thank you.
Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb

Posted 2 months ago

  • 1
  • 1
Photo of Everett Patterson

Everett Patterson

  • 712 Points 500 badge 2x thumb
You can use the IOL technique


Here's the simple script used in the example above, use the dev console (F12) inside your browser to track down which HTML elements you want to change




Setup IOL - https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

Photo of Everett Patterson

Everett Patterson

  • 712 Points 500 badge 2x thumb
Backslash (//) this part out of the code and see if that's the problem

//$("#sect_s19").css("backgroundColor", "yellow");
Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
If I backslash that part, then there is no background color. I want the background color for the whole section.It worked before. Besides what I did in the dev console, I tried to change the section heading to the tab. When I change it back, the background color messed up. I am not sure it messed up because of what I did in the console or because I changed the tab and switch it back. 

It was working perfectly before I tried this. I think what I did in the console caused this problem.
Photo of Everett Patterson

Everett Patterson

  • 712 Points 500 badge 2x thumb
Ok, let's check it tomorrow morning, mine is working on and off so there could be an issue with QuickBase/Cloudflare servers
Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
Everett Patterson,

ok. Thanks so much for all your help. I'll let you know if it is working tomorrow.

Thanks again!
Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
Everett Patterson,

The background color is still not working property as it was before. There are still white spaces between elements. Can you please help me with this problem?

Thanks!!
Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
I just realized that it just worked for that particular ticket which I got the ID from. On the another ticket, the background color got changed on different fields which I don't want to change. 




Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
I have to type of tickets: service center ticket and customer ticket. The customer ticket does not have checkbox fields that i want the background to be changed. That's why the background color changed on different fields on the customer ticket. Can you please show me how I can fix this problem?
Photo of Everett Patterson

Everett Patterson

  • 672 Points 500 badge 2x thumb
Use this on your code page, replace the alerts with what you want on each page type

(function(){
  //$("img[qbu=module]").remove();
  //$("img[qbu=module]").hide();
  var querystring=document.location.search;
  if (/dlta=mog/i.test(querystring)) {
    //GRID EDIT PAGE ========================================
    alert("You are on the Grid Edit Page");
  } else if(/a=er/i.test(querystring)) {
    //EDIT RECORD PAGE ========================================
    alert("You are on the Edit Record Page");
  } else if (/a=API_GenAddRecordForm/i.test(querystring)) {
    //API_GenAddRecordForm PAGE ========================================
    alert("You are on the GenAddRecordForm Page!");
  } else if (/a=GenNewRecord/i.test(querystring)) {
    //ADD RECORD PAGE ========================================
    alert("You are on the Add Record Page");
  } else if (/a=nwr/i.test(querystring)) {
    //ADD RECORD PAGE ========================================
    alert("You are on the Add Record Page");
  } else if(/a=dr/i.test(querystring)) {
    //DISPLAY RECORD PAGE
    alert("You are on the Display Record Page");
    $("img[qbu=module]").closest("td").css("background-color","#FFFFFF");
  } else if(/a=q/i.test(querystring)) {
    //REPORT PAGE ========================================
    alert("You are on the Report Listing Page");
  } else if(/a=td/i.test(querystring)) {
    //TABLE DASHBOARD PAGE ========================================
    alert("You are on the Table Dashboard Page");
  } else if (/a=FinishEditRecord/i.test(querystring)) {
    //FINISH EDIT RECORD PAGE ========================================
    alert("You are on the Finish Edit Record Page");
  } else if (/a=API_GenAddRecordForm/i.test(querystring) {
    //API_GenAddRecordForm ========================================
    alert("You are on the API_GenAddRecordForm Page"); 
  } else {
    //OTHER PAGE ========================================
    alert("You are on the Some Other Page");
  }
})();

Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
So this means that I don't have to create the field that call iol variables?
Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
When I try the code that you provided, non of the alerts pops up when i am in the different page. Can you tell me what the problem is ?
Photo of Everett Patterson

Everett Patterson

  • 672 Points 500 badge 2x thumb
This one works for the Add/View/Edit pages (not sure why the original code isn't working with all pages I'll have to test it some more)

(function(){
var querystring=document.location.search;
  if (/a=er/i.test(querystring)) {
    //EDIT RECORD PAGE ========================================
    alert("You are on the Edit Record Page");
 } else if(/a=dr/i.test(querystring)) {
    //DISPLAY RECORD PAGE
    alert("You are on the Display Record Page");
 } else if (/a=nwr/i.test(querystring)) {
    //ADD RECORD PAGE ========================================
    alert("You are on the Add Record Page");
  }

})();

Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
Everett,

Thanks so much for the code! It works. You're awesome!!
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,346 Points 50k badge 2x thumb
Have you considered a simpler native approach?

You can just put a text element on your form beside the checkbox and Suppress the native field name.  You would check the checkbox for enable html.


<SPAN STYLE="background-color:yellow">These are the words for checkbox #1</SPAN>
Photo of Sales Info

Sales Info

  • 566 Points 500 badge 2x thumb
what if i want to customize the background color for the section like below using a simpler way?
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,346 Points 50k badge 2x thumb
Sorry,  but I don't know of a simpler a way to do that. 

imho it's just not worth spending so much time on formatting issues like that.  My attitude  as a developer is to do the 95% that can be done quickly and never mind that last 5%, because I always have a backlog of project work to be done, so I just move onto the next thing on my to do list.