Grid Filter background CSS

[DanWolf]

Hi all,

I'm trying to set the background of a grid filter to transparent (inherit).  I can change the background to a color by changing the top-bar and tools backgrounds in the grid's Style Properties, but setting those to "inherit" is not making the background transparent.  I can't find any other Style Properties to change so maybe I need custom CSS but I don't know how to do that in CSS.  Does anyone have an idea how to do this?  Hopefully the attached image helps show what I'm trying to do (I want the filter background to be transparent to show the overall background color).

Thanks!

[PEHOWE]

Hello @DanWolf ,

Not sure I understand exactly what you are trying to change. The Grid style Properties contains: "Filter-field-text-box" which seems to be what you need to set:

It would also be helpful to know the Version of ThingWorx. This could help if there is a known issue and some solutions do not work on all versions.

Regards

Pehowe
 

[DanWolf]

Hi @PEHOWE, thanks for the response.

Oh yes, sorry I completely forgot to mention the ThingWorx version.  It's 9.7.2.  I'm not trying to set the background of the text box, but the container behind the text box - the green-ish area below.

I can give that area a color by assigning the background of "tools" or "top-bar", I want that transparent so the background (red color above) shows through.  I have tools and top-bar backgrounds set to "inherit" but it still comes up white.  I assume that white is coming from something else in the grid but I can't find any other Style Properties that affect it.

I'm attaching a ZIP file with a mashup and style theme for an example.  The mashup has a yellow container and most of the grid inherits that color, but not the area around the filter field - that's the part I'm trying to figure out.

[PEHOWE · Accepted solution]

Hello @DanWolf ,

I have been in conversation with a Subject matter expert. They have provided some sample Custom CSS.
In my limited testing it seems to address your question. Please test and let me know if you have questions:

This custom css makes the grid transparent, with a few exceptions (like the background of the filter textfield):

@supports (ptcs-style-unit: "PTCS-GRID") { 

     [part=core-grid] { 

          background: transparent; 

     } 

     [part=grid-control] { 

           background-color: transparent; 

      } 

} 

@supports (ptcs-style-unit: "PTCS-GRID:grid-control") { 

     [part=data-filter] { 

          background-color: transparent; 

     } 

      [part=data-filter]::part(top-bar) { 

           background-color: transparent; 

       } 

} 

@supports (ptcs-style-unit: "PTCS-GRID:core-grid") { 

      [part=body] { 

           background: transparent; 

       } 

        [part=header] { 

             background: transparent; 

         } 

         [part=row] { 

               background: transparent; 

         } 

}
 

Please let me know if you have any questions.

Regards,
Pehowe

[DanWolf]

Hello @PEHOWE 

That works perfectly.  Thanks for your help!