Question

Forms - Spacing between form elements changes when submitted to the repository

Forms

Updated October 28, 2015

asked on October 20, 2015

I'm working on a form with a lot of CSS customization. The image below shows what my form looks like when running the form in a browser. I want to maintain the tight spacing between field elements.

After submitting the form into the repository, I get large spaces in between each form element (shown in redstripe):

What global CSS element controls that spacing?

0 0

Answer

SELECTED ANSWER

replied on October 28, 2015 • Show version history

I was able to control the spacing on the final saved form in the repository by setting padding and margin on the actual individual form ID's:

#q1, #q2, #q3, #q4 { padding: 0px; margin: 0px; }

You can do it globally as well for all id's starting with "q" - here's the jQuery:

$(document).ready(function() {
  $("[id^='q']").css({"padding": "0px", "margin": "0px"});
});

2 0

Replies

replied on October 23, 2015

Hi Eric,
The global CSS element that controls spacing looks like this:
ul li.form-q {

padding: 10px 10px;

}
I’ve also shared a quick screen grab of the element changes when it is adjusted. http://screencast.com/t/on4a8Ymoa
Regards,
Kevin

1 0

replied on October 22, 2015

I wonder if it has anything to do with @media print CSS options. I would recommend you try opening the form in Chrome and use the developer tools to preview the document as it is printed rather than how it appears regularly. I'm not sure if you can do this with other browsers, but in Chrome you can:

Open your form, fill in, etc... just don't submit it yet.
Hit F12 to open the Developer Tools.
Click on the Developer Toolbar and press Esc to open the Drawer.
Go to the Emulation tab, then click on the Media option to the left.
Check the "CSS Media" checkbox, and set the dropdown to "print"

This should let you preview your webpage, live, as it would be printed (or when saved to Laserfiche). From there, you can use the Inspector tool to examine the HTML and find the related styles that you need to modify (hopefully you're already pretty good at this if you've highly customized the original form).

You will probably have to add some CSS to your section along the lines of:

@media print{
/* Add your print-formatting CSS here:*/
  .blah input{
    font-weight:bold!important;
    /*... etc, etc;*/
  }
}

0 0

replied on October 23, 2015

The Google Developer Tool, Emulation setting that displays your page as it would "print" isn't a true representation of how it's saved into Laserfiche unfortunately. Also the @media print CSS element doesn't seem to change the spacing either.

Also, I used Kevin's suggestion with the ul li.form-q CSS element, but that still only controls spacing in the browser view, not the saved form in the repository.

So, it's Go Fish on this one :) But thank you both for the feedback. If someone figures this out, there is a brownie in it for you :)

0 0

You are not allowed to follow up in this post.

Question

Question

Forms - Spacing between form elements changes when submitted to the repository

Answer

Replies

Sign in to reply to this post.