Change spacing around instructions in forms

API & Customization Ask Developers
1

There’s several helpful solutions here for moving the instructions in forms above their field or turning them into tooltips (very cool, btw), but I have a slightly different problem. And I have zero CSS skills…

Here’s my issue:
If you add instructions to a form field, the instructions are spaced below from the field at what appears to be the same distance as between fields in general. In my opinion, this makes for more difficult reading as the instructions are equidistant from both the field they belong to and the heading of the next field in a form.

Here’s a screen shot where I used Chrome’s inspector to highlight what I’d like to get rid of. The annoying spacing seems to be the peach colored margin below the field itself.

margin

But I only want to get rid of it when there’s an instruction following (there should still be that margin between form fields).

Any help much appreciated!

2

Hi Rick,

You can try adding this code to your CSS:

form .kn-input:not(.kn-input-paragraph_text) p.kn-instructions {
  margin-top: -12px;
}

It adds a negative margin to instructions that appear under any form input (note that paragraph inputs are excluded because those instructions appear on top of the input).

3

thanks a lot - works perfect!

1 Like