Skip to main content
Nintex Community Menu Bar

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?

 

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


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;

}

 


Hi ​@poirisop,

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

 


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 😢


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.


Reply