How to remove extra space between form elements?

Thanks to your help in pointing out the Narrative field, I have the functionality working in Wailea 670 Waiver. Just a few more things to work out:

- Remove the extra space above and below the narrative field at the top

- Is it possible to adjust the width of the large text fields? I may need to tweak them a little to make them look like the original

- The same problem with e-signature as with signature at the bottom - how to make it fit nicely into the surrounding text (has to line up with the field above it and can't have too much space above it); can the size of the font in the sub-text be increased? 

Rob

Hello Rob,

I have added some CSS code to your form to adjust spacing as per your requirements. Please check if form now looks better: www.jotform.com/91556423476160 

Related guide: How-to-Inject-Custom-CSS-Codes

But, I am not sure if I understand correctly how you would like to 'line up' the signature element. Can you please provide some more info on that?

The problem is that it is not our waiver but one provided by a third party so it has to look identical to their PDF:

Notice that the signature field is aligned under the printed name field and is the same length as the printed name field including its label. Also that the signature sub-text is the same font and size as the rest of the text in the document.

---

When I went to look at the form this morning, the narrative field was in the wrong place. It had been moved below the text section that starts with RECITALS. I moved it back up to where it should be (second section) but I seem to have lost any CSS changes you made. I'll look at the CSS reference you provided and see if I can get it looking better (mostly just eliminate the blank space between the first section - text - and the second section - narrative field).

Thanks for your help!

Rob

Thank you for sharing more info, Rob. Please allow me some time to check your form once again and provide needed adjustments. I will update you via this thread once ready. 

I now have everything working, I think, except for the line in the canvas and the font size and color of the sub-label for it. For the sub-label, it appears that I can't override the label[for*='sig'] for the size and color because of some other setting, although I can override the font family. For the line, I think it must be programmatically rendered, not in the CSS. It should be more narrow (1 px) and not padded.

Rob

You are right, a line within signature field does not seem to be adjustable via CSS. But, what is the problem for  label[for*='sig'] ? As I change font-size for it to 17px on cloned form, this seem to work:

I had label[for*='sig'] in my CSS before (font-family worked there while font-size didn't because it was overridden by a rule in some other CSS) and so hit cmd-Z in the CSS box to undo my latest change, but that erased the entire contents of the CSS box. Where is your cloned copy so I can restore the CSS?

Thanks,
Rob

Here is a cloned form: https://www.jotform.com/91576440893972 

And just in case, I am also pasting all CSS here:

#cid_20 {

  margin-top: -1.5em;

}

.form-sub-label {

  font-family: Times New Roman;

  font-size: 13 pt;

  color: black;

}

#signature_pad_19 {

  border: none;

}

#id_16, #id_3 {

  padding-bottom: 0;

  padding-top: 0;

  margin-bottom: 0;

}

#id_3 {

  margin-top: -1em;

  margin-bottom: -2em;

}

#id_19 {

  margin-top: -1em;

  padding-bottom: 0;

  padding-top: 0;

}

label[for*='sig'] {

  font-size: 17px;

  color: #333;

}

#label_19 {

  width: 120px;

}

 Thank you for all your help! It's all looking very good now, except for the signature line at the bottom. Could you check if there is a way to make it be the full width of the canvas and only one pixel wide? If not, I'll have to see if I can twist the arm of the third party that owns the waiver to accept that difference.

I have been evaluating a couple other options for online waiver forms and JotForm is by far the most flexible and powerful. If all you want to do is drag and drop a few text fields, any of them will work. But if you need very fine-grained control and are willing to put in the work to tweak the appearance, so far JotForm is the only one.

Rob

Hello Rob - Please try this custom CSS code:

canvas.jSignature {
    width: 750px!important;
    right: 185px!important;
    position: relative;
}

Guide: How-to-Inject-Custom-CSS-Codes

Please give it a try and let us know how it goes.

That made the line too wide. But I had already figured out to get it aligned:

.signature-line {

  margin-left: 6em;

}

label[for*='sig'] {

  margin-left: 7em;

}

Neither method changes the line width to one pixel, though.

Try changing the widget's size with this code: 

.signature-pad-wrapper, canvas.jSignature {

    width: 450px!important;

    right: 185px!important;

    margin-left: 50%;

}

I would recommend you to test this and play with the values in order to see how the widget changes, you may adjust the widget to be displayed as you want. 

  I have the widget size and positioning pretty much the way I want
them. The question is about the line width (the horizontal line on which
you draw a signature). It looks like 3 or 4 pixels wide, should be 1 pixel.
Rob
...

I would like to apologize for any inconvenience. It appears that the horizontal line you are referring to is part of the canvas element used in E-signature widget in your form and I'm afraid that it is not possible to style it by injecting custom CSS codes to the form.