Table headings showing up as red

Screenshots of the preview and the Salesforce view

Rhyannon,

What theme are you using in these pages and is it custom or standard? Also, what version of Skuid are you on?

Thanks!

I am using the Lightning Theme and we are on version 9.5.4.
I have sort of found the problem. I haven’t fixed it but I have come up with a work around. The reason they are red is because they are mandatory objects. Projects are the opportunity object that has been renamed. The 3 fields I was using are all standard mandatory opportunity fields so I can’t change that. I believe that was what was making them red.

What I have done is created UI only formula fields to bring through the data. The column headings are no longer red and they have stopped wrapping. 

Why they were showing up fine in the preview and then turning red and wrapping in Salesforce, I still haven’t figured out. The column headings wrapping without the rows of data wrapping is not a good look. 

The New issue that has arisen with my formula field is you can no longer click on the Opportunity/Project Name and go to the Opportunity! 
So I have a red strange column heading or no link to the opportunity. 

No need to use a UI Only field. I’ve run into the same problems and found some CSS workaround. It seems like Lightning adds their own styling when a field in a table is a required field
Here’s what’s automatically added:

.forceStyle .required {
    float: left; /* this makes all the headers jumbled up*/
    padding-right: 2px;
    color: rgb(194, 57, 52); /* makes it all red /
    font-weight: 700; / makes it bold */
}

So if you add this to a custom CSS snippet, it should override Lightning’s styling and remove the wrapping:

.forceStyle .required { 
     float:none;
}

If you don’t mind the red bold header, you can leave that alone. If you want to change that to match your other headers, just add the rest of the styling:

.forceStyle .required {
    float: none;
    color: #7bbfe4; 
    font-weight: normal;
}

If you’re experiencing the issue where the header’s heights are not even, you can add this to the same CSS snippet:

table {    border-collapse: separate !important; }

Hope that helps!

Thank you so much!!

Rhyannon,

The column headers are turning red and looking different in Lightning because of a CSS issue (and you’re correct, it’s based on if the fields are required or not). We’re now aware of this issue and will let you know when it’s fixed in a future Skuid release. To be clear, though, the CSS workaround that Huyen gave you won’t be affected by the future release, so you won’t have to worry about that.

Thanks!