Skip to main content
Nintex Community Menu Bar
Solved

Using the option CSS Class in a Form Rule

  • July 10, 2025
  • 5 replies
  • 64 views

poirisop
Forum|alt.badge.img+4

I want to use the option CSS Class in a form rule but I don’t know how to procede. Did not find any example in the Nintex Help Center. Can someone show me how to add CSS code in my rule?

 

Best answer by SimonMuntz

Hi ​@poirisop,

Basically, a CSS style needs to be created in the styles tab, and then you can apply that to controls.
I have attached a video that shows how to achieve your solution, and the form that was used in the video.
Here is a link to the CSS help files to help you write your CSS for Nintex Forms.
https://help.nintex.com/en-US/nwc/Content/Designer/CustomCSSGuidelines.htm

5 replies

SimonMuntz
Nintex Employee
Forum|alt.badge.img+23
  • Nintex Employee
  • Answer
  • July 10, 2025

Hi ​@poirisop,

Basically, a CSS style needs to be created in the styles tab, and then you can apply that to controls.
I have attached a video that shows how to achieve your solution, and the form that was used in the video.
Here is a link to the CSS help files to help you write your CSS for Nintex Forms.
https://help.nintex.com/en-US/nwc/Content/Designer/CustomCSSGuidelines.htm


poirisop
Forum|alt.badge.img+4
  • Author
  • Rookie
  • July 11, 2025

I would like my group to be collapsed by default if the controls in the group are empty. However, I would also like the user to be able to expand the group to add information if needed. I am having difficulty defining the CSS code. Can you help me?

[dir] .nx-theme-styles ntx-group .nx-collapse {

  max-height: 36px;

  overflow: hidden;

  transition: max-height 0.3s ease-out;

}

 


SimonMuntz
Nintex Employee
Forum|alt.badge.img+23
  • Nintex Employee
  • July 20, 2025

Hi ​@poirisop,

Are you able to use the control functionality to do the collapsing?
 

 


poirisop
Forum|alt.badge.img+4
  • Author
  • Rookie
  • July 21, 2025

No, because I want the group to be collapse only if the fields in the group are empty. If not, I don't want the group to be collapsed. However, I would also like the user to be able to expand the collapsed group to add information if needed. That’s why I want to use a rule. I am able to use CSS style to collapse the group if the fields are empty, but I cannot “uncollapse” it 😢


SimonMuntz
Nintex Employee
Forum|alt.badge.img+23
  • Nintex Employee
  • July 23, 2025

Hi ​@poirisop,

In general, expandable controls are achieved using the <details> HTML tag.
I am not sure how Nintex Forms does it, but a <details> tag cannot be controlled with CSS.
I tried using this jQuery plugin to control the expandability programmatically, but did not have much success.
https://gallery.nintex.com/t/js-insert

I tried using the classes that Nintex adds and removes when expanding and collapsing, but I only had partial success.