Question

Change background color of each row total field, if the input is negative

Forms Classic Form Designer How To

Updated September 26, 2024

asked on September 23, 2024 • Show version history

Hey all,

I've done a search for this and found a few threads that are a little close, but not exactly working for me. I have a Forms table that has a calculation to sum dollar increment amounts per row into a "Total" field on the same row (it's also read-only if that is relevant). What I would like is for this "Total" is to change the background of the field to turn red if it is negative (per each row).

The closest I got was a red outline of the field, but only if there was manual input and was not working with calculations.

I thank you in advance.

0 0

Answer

SELECTED ANSWER

replied on September 24, 2024 • Show version history

You can achieve this with a mixture of field rules & CSS in the modern designer by doing the following:

On your Total/calculation field, assign a field rule to add a CSS class when the value is less than 0. I named my CSS class "negative".

Next, add the following CSS (adjusting the class name and the colour if necessary):

.negative {
  background-color: #FF786E;
  color: initial !important;
}

Let me know if you have any questions and I can try and help troubleshoot if needed. :)

1 0

View 1 previous reply

replied on September 24, 2024

Hey thanks!

I tried converting my form to Modern so I could try this and I lost a lot of CSS visuals. Do you suggest I go the Modern route, get this to work and rework in the CSS visuals I had in there? Or do you another way to implement within the Classic Designer? Also, will this highlight the whole column as a different color if only one value is negative, or each negative field in that row?

Thanks again.

0 0

replied on September 25, 2024

If you're just worried about CSS styling, that should be easy enough to rework in the modern designer, and then you get the added benefit of all the new features. However, if you're using any Javascript, the classic designer has more capabilities.

This coding & rule will highlight each negative value cell within the Total column. (Not the whole column, and not the whole row.) Does that work for you?

0 0

replied on September 25, 2024

Thank you so much, your solution worked for me and also forced me to learn a little more about the Modern Designer... something I have not taken too much time to learn.

Thanks for the guidance!

0 0

replied on September 26, 2024

No problem at all, happy to help! :)

0 0

Replies

replied on September 24, 2024

I don't know if this will help you, but we use this CSS code to make our costing table rows appear as alternate light and dark purple. This is in the Modern Designer. Maybe there's an element here that might point you in the right direction?

// change table button color (alternate rows)
.costingTable tr:nth-child(even) .lf-icon { color: rgb(255, 255, 255); }
// alternate table tr background colors - odd
.costingTable tr:nth-child(odd) { background-color: rgb(227, 219, 236); }
// alternate table tr background colors - even
.costingTable tr:nth-child(even) { 
  background-color: rgba(73, 43, 116, 0.6);
  color: initial;
}

// alternate table tr background colors - even - currency unit
.costingTable tr:nth-child(even) .currency-unit { 
  color: white;
}

 .costingTable .fl-component input:not([type="checkbox"]):not([type="radio"])[readonly], .fl-component textarea[readonly] {
  background-color: #f5f2f8 !important; 
}

0 0

replied on September 25, 2024

Thank you for this, I am going to save it because I know it will be handy.

1 0

You are not allowed to follow up in this post.

Question

Question

Change background color of each row total field, if the input is negative

Answer

Replies

Sign in to reply to this post.