Nintex Forms: remove padding for text box

  • 11 April 2016
  • 3 replies
  • 7 views

Badge +4

Hi all,

I have a repeating section with several single line text boxes, and I would like to optimize the space utilization on the form.

How do I remove the padding around the text box? Not a CSS/JavaScript guy, so some help requested.

182498_pastedImage_0.png


3 replies

Userlevel 6
Badge +12

Hello Prasanna Adavi​ -

If you are working with the default CSS that is in Nintex Forms, you can adjust it by altering the following section:

.nf-form-input .nf-filler-control-inner, .nf-form-label .nf-filler-control-inner

{

     top: 10px;

     bottom: 10px;

     left: 10px;

     right: 10px;

}

Keep in mind that this is for all of the CSS Classes listed (.nf-form-input .nf-filler-control-inner, .nf-form-label .nf-filler-control-inner).

After you remove it, you can go into the settings for each control and set the padding to what you want under Formatting:

182520_pastedImage_1.png

Hope this helps!

Badge +4

Another option (especially if you're trying to avoid changing or overriding any code) would be to just clear out the CSS class field in the text box.  The nf-section, nf-form-input, etc. are automatically put in by Nintex, you can clear those out to remove the padding.

This allows you to individually choose which controls have the padding removed, versus changing the CSS class, which would change every control on the form belonging to that class.

When you do that, the text box should snap to the top-left of the control.  From there, you can resize the control by dragging the bottom-right corner to eliminate the padding on the right/bottom of the text box.

There is, unfortunately, a minimum size for the controls, so you can't always get them as small as you may like.  There are ways using CSS but I've run into other problems when I've tried to do that.

Please let me know if that helps or if you have any questions.

Badge +4

Fantastic! The suggestion by jr204 worked better for me.

Jesse's suggestion also was helpful, but for some reason, it still left the padding at the bottom of the text box, no matter what i did.

Reply