Inject CSS for Experience Builder App

Darryl Klassen

July 31, 2024 16:24

Hello, I have various workflows that I have used the Inject_CSS widget within workflow to modify the appearence of an elmentn on my forms within Web App Builder.  Now that we are transiitioning to Experience Builder - these CSS modifications don't seem to be working the same.  Specifically, I am trying to modify the # of columns (column-count) of items in a Check Group item or a Radio Group item using this code, where my item is named “checkStatus”:

div.CheckGroup.gcx-forms-checkStatus div.items
{column-count:2; font-size: 14px;}

 

Does anyone know how to do this and have it working in Experience Builder Dev Edition?  So far I haven't been able to figure it out.  Thanks

0

• 

  Darryl Klassen

  July 31, 2024 17:34

  also, the font-size: 14px within the inject CSS does seem to get implemented - so I assume my syntax for the column-count is incorrect in the Experience Builder environment?

   

  0
• 

  Berend Veldkamp

  August 06, 2024 14:46 Edited

  To debug CSS issues, I usually open the browser's developer tools by right clicking on whatever element I am working on, and the selecting Inspect.

  You can then see which rules are applied, and if the structure of the HTML is still the same. 

  1

Please sign in to leave a comment.