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?
Solved
Using the option CSS Class in a Form Rule
+4Best answer by Simon Muntz
Hi
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
+23- Nintex Partner
- Answer
Hi
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
Translate
+4I 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;
}
Translate
+23- Nintex Partner
Hi
Are you able to use the control functionality to do the collapsing?
Translate
+4No, 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 😢
Translate
+23- Nintex Partner
Hi
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.
Translate
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.